Apakah saya perlu menginstal shadcn/ui terlebih dahulu?

Ya. Alat ini menghasilkan kode yang mengasumsikan Anda telah mengonfigurasi CLI `shadcn-ui` dan primitif yang diperlukan diinstal melalui `npx shadcn-ui@latest add`.

Apakah kodenya kompatibel dengan Next.js?

Ya. Output yang dihasilkan menggunakan konvensi React dan Tailwind CSS standar yang berfungsi di Next.js, Vite, dan kerangka kerja modern lainnya.

Apakah ini mendukung TypeScript?

Generator menyediakan kode TypeScript-first secara default, termasuk jenis yang diperlukan untuk props dan ref komponen.

Bisakah saya menyesuaikan stylenya?

Output menggunakan kelas utilitas Tailwind CSS. Anda dapat memodifikasi kelas yang dihasilkan langsung di editor Anda agar sesuai dengan persyaratan desain spesifik Anda.

Formatter & Kode

Generator Komponen shadcn/ui

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

Catatan editor

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

Bab mendalam ini saat ini hanya tersedia dalam bahasa Inggris. Alat konversi di atas berfungsi dalam bahasa Anda; artikel penjelasan panjangnya belum diterjemahkan.

Pertanyaan yang sering diajukan

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.

Orang juga mencari

Fitur terkait

More in this room.

Lihat semua di Formatter & Kode