Önce shadcn/ui kurmam gerekiyor mu?

Evet. Bu araç, `shadcn-ui` CLI'nin yapılandırıldığını ve `npx shadcn-ui@latest add` aracılığıyla gerekli ilkel öğelerin yüklendiğini varsayan kod üretir.

Kod Next.js ile uyumlu mu?

Evet. Oluşturulan çıktı, Next.js, Vite ve diğer modern framework'lerde çalışan standart React ve Tailwind CSS kurallarını kullanır.

TypeScript'i destekliyor mu?

Oluşturucu, varsayılan olarak TypeScript öncelikli kod sağlar; buna props ve bileşen referansları için gerekli typelar dahildir.

Stilimi özelleştirebilir miyim?

Çıktı, Tailwind CSS utility class'larını kullanır. Belirli tasarım gereksinimlerinize uyması için oluşturulan class'ları doğrudan düzenleyicinizde değiştirebilirsiniz.

Biçimlendiriciler ve Kod

shadcn/ui Bileşen Oluşturucu

Compose shadcn primitives into ready-to-paste components.

Runs in your browser

Component name

shadcn primitives

UserCard.tsx

import { Card } from "@/components/ui/card";
import { Avatar } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";

interface UserCardProps {
  title: string;
  description?: string;
}

export function UserCard({ title, description }: UserCardProps) {
  return (
    <Card className="p-4">
      <Avatar className="mb-3 h-12 w-12" />
      <h3 className="font-semibold">{title}</h3>
      {description && <p className="mt-1 text-sm text-muted-foreground">{description}</p>}
      <Button className="mt-3">Action</Button>
    </Card>
  );
}

lines: 20chars: 568size: 568 B

live

Editörün notu

Understanding · Not a library. A copy-paste project.

Bu ayrıntılı bölüm şu anda yalnızca İngilizce olarak sunulmaktadır. Yukarıdaki dönüştürme aracı sizin dilinizde çalışır; uzun açıklayıcı yazı henüz çevrilmemiştir.

Sıkça sorulan sorular

Quick answers.

›Do I need to install shadcn/ui first?

Yes. This tool generates code that assumes you have the `shadcn-ui` CLI configured and the necessary primitives installed via `npx shadcn-ui@latest add`.

›Is the code compatible with Next.js?

Yes. The generated output uses standard React and Tailwind CSS conventions that work in Next.js, Vite, and other modern frameworks.

›Does this support TypeScript?

The generator provides TypeScript-first code by default, including the necessary types for props and component refs.

›Can I customise the styling?

The output uses Tailwind CSS utility classes. You can modify the generated classes directly in your editor to match your specific design requirements.

İnsanlar ayrıca şunları arar

İlgili araçlar

More in this room.

Tümünü gör Biçimlendiriciler ve Kod