Portfolio Component Shop
Build your portfolio like LEGO. เลือกชิ้นส่วนเว็บที่ชอบ กด Copy แล้วเอาไปต่อกันใน starter project ของ Challenge Day 2 ทุกชิ้นใช้ Next.js, TypeScript และ Tailwind CSS ไม่ต้องติดตั้งอะไรเพิ่ม
- 01Pick
เลือก component ที่ชอบจากหน้านี้
- 02Copy
กด Copy code แล้ววางในไฟล์ใหม่ใน
components/ - 03Customize
import มาใช้ใน
app/page.tsxแล้วเปลี่ยน props เป็นข้อมูลของคุณ - 04Build
ต่อ Navbar, Hero, Projects และ Footer แล้ว deploy ขึ้น Vercel
อยากได้มากกว่านี้
ร้านนี้ตั้งใจทำให้ copy ไปใช้ได้ทันทีโดยไม่ต้องลงอะไรเพิ่ม พอคล่องแล้ว ลองไลบรารีที่ใช้กันจริงในงาน ทุกตัวใช้ Tailwind CSS เหมือนกัน
ปุ่ม ฟอร์ม dialog และ component พื้นฐานที่ copy เข้าโปรเจกต์ด้วยคำสั่ง `npx shadcn@latest add button`
AnimationMagic UIcomponent ที่มี animation สำหรับหน้า landing ใช้คู่กับ shadcn/ui ได้เลย
AnimationReact Bitsตัวหนังสือเคลื่อนไหว พื้นหลัง และเอฟเฟกต์ เลือกเวอร์ชัน TypeScript + Tailwind ได้
Magic UI และ React Bits บางตัวต้องลงแพ็กเกจเพิ่ม เช่น motion อ่านส่วน Installation ของแต่ละตัวก่อน แล้วรัน npm run build ให้ผ่านก่อน push