Dois-je installer shadcn/ui en premier ?

Oui. Cet outil génère du code qui suppose que vous avez configuré la CLI `shadcn-ui` et installé les primitives nécessaires via `npx shadcn-ui@latest add`.

Le code est-il compatible avec Next.js ?

Oui. La sortie générée utilise les conventions standard de React et Tailwind CSS qui fonctionnent dans Next.js, Vite et d'autres frameworks modernes.

Est-ce que cela prend en charge TypeScript ?

Le générateur fournit du code TypeScript-first par défaut, y compris les types nécessaires pour les props et les références de composants.

Puis-je personnaliser le style ?

La sortie utilise les classes utilitaires Tailwind CSS. Vous pouvez modifier les classes générées directement dans votre éditeur pour correspondre à vos exigences de conception spécifiques.

Formateurs & Code

Générateur de Composants 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

Note de la rédaction

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

Ce chapitre approfondi n'est actuellement disponible qu'en anglais. L'outil de conversion ci-dessus fonctionne dans votre langue ; le long article explicatif n'a pas encore été traduit.

Questions fréquentes

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.

Les internautes recherchent aussi

Outils similaires

More in this room.

Tout voir dans Formateurs & Code