Bileşen Ekleme

shadcn/ui Nedir?

shadcn/ui hazır bileşenler sunuyor:

• Butonlar
• Modallar (açılır pencereler)
• Formlar
• Kartlar
• Tablolar
• Ve daha fazlası...

Önemli: Bileşenler senin proje dosyalarına ekleniyor. node_modules'a değil. İstediğin gibi değiştirebilirsin.

Bileşen Ekle

npm

npx shadcn add button

bun

bunx shadcn add button

pnpm

pnpm dlx shadcn add button

yarn

yarn dlx shadcn add button

Bu komut src/components/ui/button.tsx dosyasını oluşturur.

Birden Fazla Bileşen Ekle

npm

npx shadcn add dialog card form input

bun

bunx shadcn add dialog card form input

pnpm

pnpm dlx shadcn add dialog card form input

yarn

yarn dlx shadcn add dialog card form input

Popüler Bileşenler

Bileşen	Ne İşe Yarıyor
button	Tıklanabilir buton
dialog	Açılır pencere (modal)
card	İçerik kutusu
input	Metin girişi
form	Doğrulamalı form
table	Veri tablosu
select	Açılır liste
tabs	Sekme navigasyonu
sonner	Bildirimler

Tümünü gör: ui.shadcn.com/docs/components

Nasıl Kullanılır

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

export default function MyPage() {
  return (
    <Button onClick={() => alert("Merhaba!")}>
      Tıkla
    </Button>
  )
}

Modal Örneği

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

export default function MyPage() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button>Modalı Aç</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Merhaba!</DialogTitle>
        </DialogHeader>
        <p>Bu bir modal pencere.</p>
      </DialogContent>
    </Dialog>
  )
}

Bileşenleri Özelleştir

Bileşenler src/components/ui/ klasöründe. Aç ve düzenle.

Örnek - yeşil buton ekle:

// src/components/ui/button.tsx

const buttonVariants = cva(
  "...",
  {
    variants: {
      variant: {
        default: "bg-primary text-white",
        // Kendi varyantını ekle:
        success: "bg-green-500 text-white hover:bg-green-600",
      }
    }
  }
)

Şimdi kullanabilirsin:

<Button variant="success">Kaydet</Button>

Renkleri Değiştir

src/index.css dosyasını düzenle:

:root {
  --primary: oklch(0.5 0.2 260);  /* Bu rengi değiştir */
}

Tema oluşturucu mu istiyorsun? ui.shadcn.com/themes adresine git