Devo prima installare shadcn/ui?

Sì. Questo strumento genera codice che presuppone che tu abbia la CLI `shadcn-ui` configurata e i primitivi necessari installati tramite `npx shadcn-ui@latest add`.

Il codice è compatibile con Next.js?

Sì. L'output generato utilizza le convenzioni standard di React e Tailwind CSS che funzionano in Next.js, Vite e altri framework moderni.

Il generatore fornisce codice TypeScript-first per impostazione predefinita, inclusi i tipi necessari per props e ref dei componenti.

Posso personalizzare lo stile?

L'output utilizza classi utility di Tailwind CSS. Puoi modificare le classi generate direttamente nel tuo editor per soddisfare i tuoi requisiti di design specifici.

Formattatori e Codice

Generatore di Componenti 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

Nota dell'editore

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

Questo capitolo approfondito è attualmente disponibile solo in inglese. Lo strumento di conversione qui sopra funziona nella tua lingua; il lungo articolo esplicativo non è stato ancora tradotto.

Domande frequenti

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.

Le persone cercano anche

Strumenti correlati

More in this room.

Vedi tutto in Formattatori e Codice