Shadcn UI - Bangun UI Cantik & Aksesibel dengan Tailwind CSS!

Bosan dengan UI yang gitu-gitu aja? Pengen bikin UI yang keren dan mudah diakses? Coba Shadcn UI!

Shadcn UI bukan sekadar perpustakaan komponen biasa, tapi alat ampuh untuk membangun UI modular dan fleksibel di React dan Next.js. Komponennya dirancang dengan indah, mudah diakses, dan bisa disesuaikan dengan kebutuhanmu.

Selain di React, terdapat juga unnoficial Shadcn UI yang di porting ke framework/librari lain seperti Svelte dan Vue

Apa Keunggulan Shadcn UI?

• Komponen Composable: Bangun UI dengan mudah dan fleksibel, seperti LEGO!
• Gaya Tailwind CSS: Ubah tampilan UI sesuai seleramu dengan Tailwind CSS.
• Aksesibilitas Terjamin: Semua orang bisa menggunakan aplikasimu!
• Dapat Disesuaikan: Sesuaikan komponen agar sesuai dengan brand dan preferensimu.
• Open Source: Bebas berkontribusi dan gunakan Shadcn UI sesukamu!
• Mudah Digunakan: Cocok untuk pemula karena dokumentasi dan instalasinya mudah.

Instalasi dan Penggunaan Shadcn UI

Ada beberapa contoh instalasi Shadcn UI, tergantung framework/librari yang digunakan. Mari kita ambil contoh instalasi Shadcn UI di framework Next.Js.

Instalasi Shadcn UI di Next.Js

Instal Next.JS

Pertama, buat project Next.JS baru dengan menggunakan create-next-app

npx create-next-app@latest my-app --typescript --tailwind --eslint

CLI

Gunakan CLI, jalankan shadcn-ui perintah init

npx shadcn-ui@latest init

Akan muncul beberapa pertanyaan untuk konfigurasi components.json

Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Do you want to use CSS variables for colors? › no / yes

Struktur folder

Berikut tampilan struktur folder Shadcn UI jika kita install di framework Next.Js

.
├── app
│   ├── layout.tsx
│   └── page.tsx
├── components
│   ├── ui
│   │   ├── alert-dialog.tsx
│   │   ├── button.tsx
│   │   ├── dropdown-menu.tsx
│   │   └── ...
│   ├── main-nav.tsx
│   ├── page-header.tsx
│   └── ...
├── lib
│   └── utils.ts
├── styles
│   └── globals.css
├── next.config.js
├── package.json
├── postcss.config.js
├── tailwind.config.js
└── tsconfig.json

Install Component Shadcn UI

Nah, sekarang bagian yang seru. Berbeda dengan librari UI lainnya, kita tidak mengimpor component dari node_modules melainkan kita install kode component yang kita inginkan langsung ke folder lokal kita. Misal kita ingin menambah component Button, maka jalankan perintah berikut:

npx shadcn-ui@latest add button

Button component akan langsung ditambahkan ke folder components/ui di folder app kita. Dengan begitu kita dapat dengan mudah meng-custom component Button yang kita tambahkan tadi. Selanjutnya, tinggal kita impor component tersebut seperti biasa ke halaman yang kita buat.

import { Button } from "@/components/ui/button"

export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}

Catatan: dalam contoh kode di atas, kita menggunakan alias import

Gampang kan?

Shadcn UI masih banyak fitur keren lainnya. Kunjungi website Shadcn UI untuk informasi lebih lengkap: https://ui.shadcn.com/

Block

Shadcn UI juga menyediakan kode template yang dinamakan block. Kalian dapat menggunakannya dengan cara copy dan paste. Silakan kunjungi halaman blocks untuk melihat semua template yang disediakan.

Lift Mode

Aktifkan lift Mode untuk copy kode per-component yang kalian inginkan seperti terlihat pada gambar berikut

Yuk, ciptakan UI yang keren dan mudah diakses dengan Shadcn UI!