Shadcn / UI Components

Panduan instalasi dan penggunaan Shadcn UI Components — framework berbasis TailwindCSS yang fleksibel dan sepenuhnya dapat dikustomisasi.

Installation

Untuk menginstal Shadcn versi terbaru (Oktober 2025), jalankan perintah berikut:

Perintah Instalasi

npx shadcn@latest init

Setelah inisialisasi, tambahkan komponen dengan perintah:

npx shadcn@latest add button

Konfigurasi Tailwind

Pastikan konfigurasi tailwind.config.js sudah mencakup direktori app dan komponen Shadcn.

tailwind.config.js

module.exports = {
  darkMode: ["class"],
  content: [
    "./app/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./pages/**/*.{ts,tsx}",
  ],
  theme: { extend: {} },
  plugins: [require("tailwindcss-animate")],
};

Penggunaan Komponen

Contoh penggunaan komponen Button yang telah diinstall dari Shadcn:

Contoh Button

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

export default function Example() {
  return (
    <div className="space-x-2">
      <Button variant="default">Default</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="destructive">Destructive</Button>
    </div>
  );
}

Contoh Dialog

Gunakan dialog untuk menampilkan konfirmasi atau interaksi tambahan dengan pengguna.

Dialog Example

import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";

export function DialogExample() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button>Buka Dialog</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Konfirmasi</DialogTitle>
        </DialogHeader>
        <p>Apakah kamu yakin ingin melanjutkan?</p>
      </DialogContent>
    </Dialog>
  );
}