Blog

Shadcn/UI Nedir? Başlangıç Rehberi

Audrey Lopez

Audrey Lopez

14 June 2025

Shadcn/UI Nedir? Başlangıç Rehberi

Web geliştiricileri için mükemmel kullanıcı arayüzü (UI) araç setini arayışı sürekli bir çabadır. Yıllardır, React geliştiricileri Material-UI (MUI), Ant Design ve Chakra UI gibi geleneksel bileşen kütüphanelerine güvendiler. Bu kütüphaneler, geliştirmeyi hızlandırma sözü veren zengin hazır bileşenler sunar. Ancak, genellikle bir ödünleşme ile gelirler: kontrol eksikliği, bir savaş gibi hissettiren stil geçersiz kılmaları ve şişmiş paket boyutları.

İşte bu noktada, React topluluğunu kasıp kavuran paradigma değiştiren bir yaklaşım olan Shadcn UI devreye giriyor. Alıştığınız şekilde bir bileşen kütüphanesi değil; daha iyi bir şey. Bunlar, bağımlılık olarak npm'den yüklemediğiniz—doğrudan projenize kopyaladığınız—güzel tasarlanmış, erişilebilir ve sonsuz yeniden kullanılabilir bileşenlerden oluşan bir koleksiyondur.

Bu kapsamlı, 4000 kelimelik eğitim, sizi tam bir başlangıç seviyesinden kendine güvenen bir Shadcn UI uygulayıcısına götürecek kesin rehberiniz olacaktır. Temel felsefesini keşfedecek, ayrıntılı bir kurulum sürecinden geçecek, karmaşık kullanıcı arayüzleri oluşturacak, gelişmiş tema ve form yönetiminde uzmanlaşacak ve büyük ölçekli uygulamalar için en iyi uygulamaları tartışacağız. Bir UI araç setinden ne beklediğinizi yeniden düşünmeye hazırlanın.

💡
Güzel API Dokümantasyonu oluşturan harika bir API Test Aracı mı istiyorsunuz?

Geliştirici Ekibinizin maksimum üretkenlikle birlikte çalışması için entegre, Hepsi Bir Arada bir platform mu istiyorsunuz?

Apidog tüm taleplerinizi karşılar ve Postman'i çok daha uygun fiyata değiştirir!
düğme

Shadcn UI Felsefesi - Yeni Bir İnşa Yöntemi

Tek bir kod satırı yazmadan önce, Shadcn UI'nin neden var olduğunu ve hangi sorunları çözdüğünü anlamak çok önemlidir. Bu temel felsefeyi kavramak, tam potansiyelini ortaya çıkarmanın anahtarıdır.

Shadcn UI Ne Değildir

Shadcn UI Nedir

Bu modelin temel avantajı, hız ve kontrolün birleşimidir. Kendi kodunuza sahip olmaktan gelen uzun vadeli esneklik ve sürdürülebilirliği feda etmeden, hazır bileşenleri kullanmanın başlangıç hızını elde edersiniz.

Ortamı Hazırlama - Proje Kurulumu ve Yükleme

Teoriden pratiğe geçelim. Sıfırdan yeni bir proje kuracağız. Bu rehber için, sunucu bileşenleri ve dosya tabanlı yönlendirmesi Shadcn UI felsefesiyle mükemmel şekilde uyumlu olduğu için öncelikle Next.js kullanacağız. Ayrıca Vite için kurulumu kısaca ele alacağız.

Adım 1: Ortam Ön Koşulları

Geliştirme ortamınızın hazır olduğundan emin olun. İhtiyacınız olacak:

Adım 2: Yeni Bir Next.js Uygulaması Oluşturma

Terminalinizi açın ve yeni bir Next.js projesini başlatmak için aşağıdaki komutu çalıştırın.Bash

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

Bu komut, my-pro-shadcn-app adlı bir dizinde yeni bir uygulama iskeleti oluşturur. Bazı önemli bayraklar ekledik:

Yükleyici size birkaç soru soracaktır. Bunlar modern bir Next.js 14+ kurulumu için önerilen seçeneklerdir:

✔ `src/` dizinini kullanmak ister misiniz? … Hayır / **Evet**
✔ App Router'ı kullanmak ister misiniz? (önerilir) … Hayır / **Evet**
✔ Varsayılan import alias'ını özelleştirmek ister misiniz? … **Hayır** / Evet

App Router'ı kullanmak standart bir uygulamadır ve src/ dizini kodu düzenlemeye yardımcı olur. Tamamlandıktan sonra, yeni projenize gidin:Bash

cd my-pro-shadcn-app

Adım 3: init Komutu - Shadcn UI'yi Hayata Geçirme

Bu en önemli adımdır. Shadcn UI, projenizi yapılandırmak için bir CLI aracı sağlar. Projenizin kök dizininden aşağıdaki komutu çalıştırın:Bash

npx shadcn-ui@latest init

Bu, projenizi kurmak için etkileşimli bir anket tetikleyecektir. Her soruyu ve önemini inceleyelim:

Onayladıktan sonra, CLI sihrini yapar:

  1. Bağımlılıkları Yükler: tailwindcss-animate ve class-variance-authority gibi gerekli paketleri ekler.
  2. components.json Oluşturur: Yapılandırma seçimlerinizi saklar.
  3. tailwind.config.ts Günceller: Shadcn UI eklentisini ve tema yapılandırmasını enjekte eder.
  4. globals.css Günceller: Tüm renk paletinizi, kenar yarıçaplarını ve daha fazlasını tanımlayan büyük bir CSS değişkenleri bloğu ekler.
  5. lib/utils.ts Oluşturur: Bu dosya, Tailwind CSS sınıflarını koşullu olarak birleştirmek için akıllı bir yardımcı fonksiyon olan bir cn fonksiyonu dışa aktarır.

Projeniz artık tamamen yapılandırılmıştır.

(Alternatif: Vite Kurulumu)

React ile Vite kullanıyorsanız, süreç çok benzerdir. Bir Vite + React + TS projesi kurduktan sonra, Tailwind CSS'yi manuel olarak yükler ve ardından npx shadcn-ui@latest init komutunu çalıştırırsınız. CLI, bir Vite kurulumunu algılayacak kadar akıllıdır ve dosya konumları hakkında biraz farklı sorular soracaktır (örneğin, globals.css yerine index.css).

Bir UI Oluşturma - Basit Bileşenlerden Karmaşık Düzenlere

Kurulum tamamlandığında, inşa etmeye başlayalım. Temel iş akışı şöyledir: bir ihtiyaç belirle, bileşeni ekle, kullan.

Adım 4: İlk Bileşenlerinizi Ekleme ve Kullanma

Varsayılan Next.js boilerplate'ini temizleyelim ve basit bir arayüz oluşturalım.

1. Bir Düğme Ekleyin:Bash

npx shadcn-ui@latest add button

Ne olduğuna dikkat edin: yeni bir dosya, src/components/ui/button.tsx, oluşturuldu. Bu sizin düğmeniz. Ona sahipsiniz.

2. Bir Kart Ekleyin:Bash

npx shadcn-ui@latest add card

Bu komut daha ilginçtir. src/components/ui/card.tsx dosyasını oluşturur. Bu dosyayı incelerseniz, birden çok bileşen dışa aktardığını görürsünüz: Card, CardHeader, CardTitle, CardDescription, CardContent ve CardFooter. Bu, bileşik bileşenler için yaygın bir desendir.

3. UI'yi Oluşturun:

Şimdi, src/app/page.tsx dosyasını açın ve içeriğini aşağıdakilerle değiştirin:TypeScript

import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input"; // Bunu bir sonraki adımda ekleyeceğiz
import { Label } from "@/components/ui/label";   // Ve bunu

export default function Home() {
  return (
    <main className="flex min-h-screen items-center justify-center bg-background p-8">
      <Card className="w-full max-w-md">
        <CardHeader>
          <CardTitle className="text-2xl">Proje Oluştur</CardTitle>
          <CardDescription>
            Yeni projenizi tek tıklamayla dağıtın.
          </CardDescription>
        </CardHeader>
        <CardContent className="grid gap-4">
          <div className="grid gap-2">
            <Label htmlFor="name">Ad</Label>
            <Input id="name" placeholder="Projenizin adı" />
          </div>
          <div className="grid gap-2">
            <Label htmlFor="framework">Çerçeve</Label>
            {/* Bunu daha sonra bir Select bileşeni ile değiştireceğiz */}
            <Input id="framework" placeholder="örn. Next.js" />
          </div>
        </CardContent>
        <CardFooter>
          <Button className="w-full">Dağıt</Button>
        </CardFooter>
      </Card>
    </main>
  );
}

Kodumuz henüz çalışmayacak çünkü Input ve Label bileşenleri eksik. Onları ekleyelim:Bash

npx shadcn-ui@latest add input
npx shadcn-ui@latest add label

Şimdi, geliştirme sunucunuzu çalıştırın:Bashnpm run dev

http://localhost:3000 adresine gidin. Bir kart içinde temiz, profesyonel görünümlü bir form göreceksiniz. Düzeni kontrol etmek için w-full, max-w-md ve grid gibi yardımcı sınıfları doğrudan JSX'imizde nasıl kullandığımıza dikkat edin. Bu, Shadcn ve Tailwind CSS'yi birleştirmenin gücüdür.

Adım 5: Daha Sofistike Bileşenleri Tanıtma

Statik girişler iyidir, ancak gerçek uygulamalar etkileşimli öğelere ihtiyaç duyar. Formumuzu geliştirelim.

1. Bir Select Bileşeni Ekleyin: "Çerçeve" girişi bir açılır liste olmalıdır. Select bileşenini ekleyelim. Bu daha karmaşıktır ve diğer bileşenlere bağımlılıkları vardır.Bash

npx shadcn-ui@latest add select

CLI akıllıdır. Select'in çalışması için bir Popover bileşeni gerektirdiğini görecek ve onu ve bağımlılıklarını da yüklemek için sizden izin isteyecektir. Bu, bağımlılıkları manuel olarak takip etmek zorunda kalmanızı önleyen harika bir özelliktir.

2. Select Bileşenini Entegre Edin: src/app/page.tsx dosyasındaki "Çerçeve" için olan Input'u yeni Select bileşeniyle değiştirin.TypeScript

// Bu import'ları en üste ekleyin
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

// ... CardContent içinde
<div className="grid gap-2">
  <Label htmlFor="framework">Çerçeve</Label>
  <Select>
    <SelectTrigger id="framework">
      <SelectValue placeholder="Bir çerçeve seçin" />
    </SelectTrigger>
    <SelectContent>
      <SelectItem value="nextjs">Next.js</SelectItem>
      <SelectItem value="sveltekit">SvelteKit</SelectItem>
      <SelectItem value="astro">Astro</SelectItem>
      <SelectItem value="nuxt">Nuxt.js</SelectItem>
    </SelectContent>
  </Select>
</div>

Tarayıcınızı yenileyin. Artık, Radix UI'nin arka planda çalışması sayesinde, animasyonlar ve uygun klavye navigasyonu ile tamamen işlevsel ve erişilebilir bir seçim açılır listesine sahipsiniz.

3. Toast ile Kullanıcı Geri Bildirimi Ekleme: Bir kullanıcı "Dağıt"a tıkladığında ne olur? Onlara biraz geri bildirim vermeliyiz. Toast bileşeni bunun için mükemmeldir.

Önce, onu ekleyin:Bash

npx shadcn-ui@latest add toast

Ardından, toast'ları kullanmak için, uygulamanın herhangi bir yerinde görüntülenebilmesi için kök düzeninize bir <Toaster /> bileşeni eklemeniz gerekir. src/app/layout.tsx dosyasını açın ve değiştirin:TypeScript

import { Toaster } from "@/components/ui/toaster" // Toaster'ı import edin

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Toaster /> {/* Buraya ekleyin, body kapanışından hemen önce */}
      </body>
    </html>
  )
}

Şimdi, toast'ı tetiklemenin bir yoluna ihtiyacımız var. useToast hook'unu kullanacağız. src/app/page.tsx dosyasını bir istemci bileşeni yapmak ve düğme tıklamasını işlemek için güncelleyelim.TypeScript

'use client'; // <-- Dosyanın en üstüne bunu ekleyin

// ... diğer import'lar
import { useToast } from "@/components/ui/use-toast";

export default function Home() {
  const { toast } = useToast(); // Hook'tan toast fonksiyonunu alın

  function handleDeploy() {
    toast({
      title: "Dağıtım Planlandı!",
      description: "Projeniz 'Projenizin adı' dağıtılıyor.",
      duration: 5000,
    });
  }

  return (
    <main className="flex min-h-screen items-center justify-center bg-background p-8">
      <Card className="w-full max-w-md">
        {/* ... CardHeader ve CardContent ... */}
        <CardFooter>
          <Button className="w-full" onClick={handleDeploy}> {/* onClick işleyicisi ekleyin */}
            Dağıt
          </Button>
        </CardFooter>
      </Card>
    </main>
  );
}

Şimdi, "Dağıt" düğmesine tıkladığınızda, ekranınızın köşesinde şık bir bildirim görünecektir.

Doğrulama ile Profesyonel Bir Form Oluşturma

Çoğu gerçek dünya uygulaması, istemci tarafı doğrulama dahil olmak üzere sağlam form yönetimi gerektirir. Shadcn UI ile bunu ele almanın resmi yolu, durum yönetimi için react-hook-form ve şema doğrulama için zod ile birleştirmektir. Hadi bunu inşa edelim.

Adım 6: Form Bağımlılıklarını Yükleme

Önce, gerekli kütüphaneleri yükleyelim:Bash

npm install react-hook-form zod @hookform/resolvers

Adım 7: Shadcn Form Bileşenini Ekleme

Shadcn UI, react-hook-form'u UI bileşenlerinize sorunsuz bir şekilde bağlamak için bir sarmalayıcı görevi gören özel bir Form bileşeni sağlar.Bash

npx shadcn-ui@latest add form

Bu, src/components/ui/form.tsx dosyasını ekleyecektir. Bu dosya, boilerplate'i önemli ölçüde azaltan bir dizi bağlama duyarlı bileşen (Form, FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage) sağlar.

Adım 8: Doğrulama Şemasını Oluşturma

src/app/page.tsx dosyanızda, zod kullanarak form verilerimizin şeklini ve kurallarını tanımlayalım.TypeScript

// Bu import'ları en üste ekleyin
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";

Şimdi, Home bileşenimizin hemen üstünde şemayı oluşturalım:TypeScript

const formSchema = z.object({
  projectName: z.string().min(2, {
    message: "Proje adı en az 2 karakter olmalıdır.",
  }).max(50, {
    message: "Proje adı 50 karakteri aşmamalıdır.",
  }),
  framework: z.string({
    required_error: "Lütfen görüntülenecek bir çerçeve seçin.",
  }),
});

Bu şema iki alan tanımlar: projectName 2 ila 50 karakter arasında bir dize olmalı ve framework gerekli bir dizedir.

Adım 9: Formu Bağlama

Şimdi, tüm bu yeni araçları kullanmak için Home bileşenimizi yeniden düzenleyelim.TypeScript

export default function Home() {
  const { toast } = useToast();

  // 1. Formunuzu tanımlayın.
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      projectName: "",
    },
  });

  // 2. Bir gönderme işleyicisi tanımlayın.
  function onSubmit(values: z.infer<typeof formSchema>) {
    // Form değerleriyle bir şeyler yapın.
    // ✅ Bu, tür güvenli ve doğrulanmış olacaktır.
    console.log(values);
    toast({
      title: "Aşağıdaki değerleri gönderdiniz:",
      description: (
        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
          <code className="text-white">{JSON.stringify(values, null, 2)}</code>
        </pre>
      ),
    });
  }

  // 3. JSX'i Shadcn'in Form bileşenleriyle oluşturun
  return (
    <main className="flex min-h-screen items-center justify-center bg-background p-8">
      <Card className="w-full max-w-md">
        <CardHeader>
          <CardTitle className="text-2xl">Proje Oluştur</CardTitle>
          <CardDescription>
            Yeni projenizi tek tıklamayla dağıtın.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <Form {...form}>
            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
              <FormField
                control={form.control}
                name="projectName"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Ad</FormLabel>
                    <FormControl>
                      <Input placeholder="Projenizin adı" {...field} />
                    </FormControl>
                    <FormDescription>
                      Bu sizin herkese açık görünen adınızdır.
                    </FormDescription>
                    <FormMessage /> {/* Doğrulama hatalarını gösterir */}
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="framework"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Çerçeve</FormLabel>
                    <Select onValueChange={field.onChange} defaultValue={field.value}>
                      <FormControl>
                        <SelectTrigger>
                          <SelectValue placeholder="Bir çerçeve seçin" />
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent>
                        <SelectItem value="nextjs">Next.js</SelectItem>
                        <SelectItem value="sveltekit">SvelteKit</SelectItem>
                        <SelectItem value="astro">Astro</SelectItem>
                        <SelectItem value="nuxt">Nuxt.js</SelectItem>
                      </SelectContent>
                    </Select>
                    <FormDescription>
                      Dağıtmak istediğiniz çerçeve.
                    </FormDescription>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <Button type="submit" className="w-full">Dağıt</Button>
            </form>
          </Form>
        </CardContent>
      </Card>
    </main>
  );
}

Bu önemli bir kod parçasıdır, ancak inanılmaz derecede güçlü ve ölçeklenebilir bir desendir. FormField bileşeni tüm durum bağlantılarını yönetir ve FormMessage, bir kullanıcı alanla etkileşime girdiğinde zod şemanızdan doğru doğrulama hatasını otomatik olarak görüntüler. Doğrulamayı görmek için boş bir proje adıyla formu göndermeyi deneyin.

Tema Oluşturma ve Özelleştirme Konusunda Uzmanlaşma

Shadcn UI'nin gerçek gücü, onu kendi tarzınıza göre uyarlamaya başladığınızda ortaya çıkar.

Adım 10: CSS Değişkenleriyle Gelişmiş Tema Oluşturma

Tüm temanız src/app/globals.css dosyasındaki CSS değişkenleri tarafından tanımlanır. Bu dosyayı açın ve :root ve .dark bloklarına bakın.CSS

/* globals.css'ten örnek */
:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
  /* ... ve daha birçok */
  --radius: 0.5rem;
}

.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  --primary: 210 40% 98%;
  --primary-foreground: 222.2 47.4% 11.2%;
  /* ... */
}

Karanlık Modu Uygulama:

Shadcn, .dark sınıf bloğu ve tailwind.config.ts dosyasındaki Tailwind'in darkMode: "class" stratejisi sayesinde karanlık mod için önceden yapılandırılmıştır. İhtiyacınız olan tek şey <html> öğesinde dark sınıfını değiştirecek bir yoldur. Bunun için popüler bir kütüphane next-themes'tir.

  1. Yükleyin: npm install next-themes
  2. Bir ThemeProvider bileşeni oluşturun (src/components/theme-provider.tsx): TypeScript
"use client"
import * as React from "react"
import { ThemeProvider as NextThemesProvider } from "next-themes"
import { type ThemeProviderProps } from "next-themes/dist/types"

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}
  1. RootLayout'unuzu bu sağlayıcıya sarın (src/app/layout.tsx): TypeScript
import { ThemeProvider } from "@/components/theme-provider"

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
        >
          {children}
          <Toaster />
        </ThemeProvider>
      </body>
    </html>
  )
}
  1. Son olarak, bir geçiş düğmesi oluşturun (örneğin, src/components/mode-toggle.tsx): TypeScript
"use client"
import * as React from "react"
import { Moon, Sun } from "lucide-react"
import { useTheme } from "next-themes"
import { Button } from "@/components/ui/button"

export function ModeToggle() {
  const { theme, setTheme } = useTheme()

  return (
    <Button
      variant="outline"
      size="icon"
      onClick={() => setTheme(theme === "light" ? "dark" : "light")}
    >
      <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
      <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
      <span className="sr-only">Temayı değiştir</span>
    </Button>
  )
}

Artık bu <ModeToggle /> bileşenini uygulamanızın herhangi bir yerine yerleştirerek sistem duyarlı, kullanıcı tarafından geçersiz kılınabilir bir karanlık mod geçişi elde edebilirsiniz.

Adım 11: Bileşen Kaynak Kodunu Özelleştirme

Bu nihai süper güçtür. Düğmeniz için yeşil arka plana sahip yeni bir başarı varyantı istediğinizi varsayalım.

src/components/ui/button.tsx dosyasını açın. buttonVariants tanımını bulun. cva (Class Variance Authority) kullanır. Basitçe yeni bir varyant ekleyin:TypeScript

const buttonVariants = cva(
  // ... temel stiller
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
        success: "bg-green-600 text-white hover:bg-green-600/90", // Yeni varyantımız
      },
      // ... boyut varyantları
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

İşte bu kadar. Artık kodunuzda kullanabilirsiniz: <Button variant="success">Başarılı</Button>. Karmaşık CSS geçersiz kılmaları yazmanıza gerek kalmadı. Sadece bileşenin kendi kaynak kodunu düzenlediniz. Bu iş akışı basit, öngörülebilir ve inanılmaz derecede güçlüdür.

Bölüm 6: En İyi Uygulamalar ve İlerisi

Uygulamanız büyüdükçe akılda tutulması gereken bazı en iyi uygulamalar şunlardır.

Sonuç: Kütüphane Yazarı Sizsiniz

Artık Shadcn UI'nin temel felsefesinden gelişmiş, gerçek dünya desenlerini uygulamaya kadar bir yolculuk yaptınız. Gerçek yeniliğinin sadece bileşenlerin kendisi değil, temsil ettiği paradigma değişikliği olduğunu gördünüz. Geliştiricileri bir kütüphanenin sadece tüketicileri olmaktan, kendi UI araç setlerinin küratörleri ve sahipleri olmaya taşıyor.

Ham kaynak kodu size vererek, Tailwind CSS ve Radix UI'nin sağlam temelleri üzerine inşa ederek ve sorunsuz bir CLI deneyimi sağlayarak, Shadcn UI, başlangıç geliştirme hızı ile uzun vadeli sürdürülebilirlik ve yaratıcı özgürlük arasında mükemmel bir denge kurar. Artık başkasının tasarım sistemiyle sınırlı değilsiniz. Projenizdeki bileşenler sizin kendi bileşenlerinizdir—değiştirmek, genişletmek ve mükemmelleştirmek için.

Uygulamanızın UI'sinin geleceği artık üçüncü taraf bir bağımlılığın elinde değil; tam olarak components klasörünüzde. İyi geliştirmeler.

💡
Güzel API Dokümantasyonu oluşturan harika bir API Test Aracı mı istiyorsunuz?

Geliştirici Ekibinizin maksimum üretkenlikle birlikte çalışması için entegre, Hepsi Bir Arada bir platform mu istiyorsunuz?

Apidog tüm taleplerinizi karşılar ve Postman'i çok daha uygun fiyata değiştirir!
düğme

API Tasarım-Öncelikli Yaklaşımı Apidog'da Uygulayın

API'leri oluşturmanın ve kullanmanın daha kolay yolunu keşfedin

Ücretsiz Kaydolİndir