Pendahuluan
Kamu sudah capek membuat UI component dari nol? Merasa component yang kamu buat tidak konsisten dengan design system yang kamu mau? shadcn/ui adalah solusi yang tepat untuk kamu.
shadcn/ui bukan library component biasa. Ini adalah kumpulan component yang bisa kamu copy-paste langsung ke project kamu. Artinya, kamu punya kontrol penuh terhadap kode-nya.
Di panduan ini, kamu akan belajar cara instalasi, tiga metode yang tersedia, cara menggunakan komponen pertama, dan tips best practice.
Kenapa shadcn/ui?
Kelebihan utama:
-
Full control - Kode component ada di project kamu. Mau modify? Modify aja.
-
Tidak ada vendor lock-in - Kamu tidak bergantung pada package update yang bisa breaking.
-
Customization mudah - Karena kamu punya kodenya, kamu bisa ubah styling tanpa restriction.
-
Type-safe - Didesain untuk TypeScript dari awal.
Kapan sebaiknya pakai shadcn/ui?
- Project baru yang butuh design system konsisten
- Kamu ingin flexibility yang tidak bisa diberikan oleh library component traditional
Tiga Cara Instalasi shadcn/ui di Next.js
Metode 1: Menggunakan shadcn/create
Metode ini paling mudah untuk memulai.
- Buka https://ui.shadcn.com/create
- Pilih template Next.js
- Copy perintah yang digenerate
- Jalankan di terminal
Perintahnya seperti ini:
1pnpm dlx shadcn@latest init --preset [CODE] --template nextUntuk menambahkan komponen:
1pnpm dlx shadcn@latest add cardMetode 2: Menggunakan CLI Langsung
Metode ini memberikan kontrol lebih dalam proses setup.
1pnpm dlx shadcn@latest init -t nextUntuk monorepo setup:
1pnpm dlx shadcn@latest init -t next --monorepoMetode 3: Untuk Project yang Sudah Ada
Kalau kamu sudah punya project Next.js dan ingin tambahkan shadcn/ui:
- Buat Next.js app baru:
1pnpm create next-app@latest- Install shadcn/ui:
1pnpm dlx shadcn@latest initPastikan di tsconfig.json sudah ada @/* alias.
Menggunakan Komponen Pertama
Setelah instalasi berhasil, mari kita coba gunakan komponen Card.
- Install komponen Card:
1pnpm dlx shadcn@latest add card- Import dan gunakan di page:
1import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
2
3export default function Home() {
4 return (
5 <Card className="max-w-sm">
6 <CardHeader>
7 <CardTitle>Project Overview</CardTitle>
8 <CardDescription>Track progress for your Next.js app.</CardDescription>
9 </CardHeader>
10 <CardContent>
11 Your design system is ready.
12 </CardContent>
13 </Card>
14 )
15}Penjelasan:
- Card - wrapper component untuk container
- CardHeader - bagian atas card untuk title dan description
- CardTitle - judul card
- CardDescription - deskripsi tambahan
- CardContent - isi utama card
Struktur File Setelah Instalasi
1app/
2├── layout.tsx
3├── page.tsx
4├── globals.css
5components/
6├── ui/
7│ ├── button.tsx
8│ ├── card.tsx
9│ └── ...
10lib/
11└── utils.tsFile penting:
- components/ui/ - Semua komponen shadcn/ui
- lib/utils.ts - Berisi fungsi cn() untuk merge Tailwind classes
- globals.css - CSS variables untuk theming
Tips dan Best Practice
1. Install Komponen Satu per Satu
Hanya install komponen yang kamu butuhkan.
1# Bad
2pnpm dlx shadcn@latest add button card dialog tabs input
3
4# Good
5pnpm dlx shadcn@latest add button2. Customize dengan Tailwind
1<Card className="w-[350px] bg-slate-900 border-slate-800">
2 <CardHeader>
3 <CardTitle className="text-white">Dark Card</CardTitle>
4 </CardHeader>
5 <CardContent>
6 <p className="text-slate-300">Customized dark theme card.</p>
7 </CardContent>
8</Card>3. Manfaatkan Dokumentasi
shadcn/ui menyediakan dokumentasi yang sangat baik. Cek dokumentasi resmi untuk setiap komponen.
Kesimpulan
shadcn/ui memberikan fleksibilitas yang tidak bisa kamu dapat dari library component traditional. Kamu punya kontrol penuh terhadap setiap baris kode.
Hal yang perlu diingat:
- Pilih metode instalasi yang sesuai dengan situasimu
- Install komponen hanya yang kamu butuhkan
- Kustomisasi sesuka hati
- Manfaatkan dokumentasi untuk belajar lebih dalam