Muss ich shadcn/ui zuerst installieren?

Ja. Dieses Tool generiert Code, der davon ausgeht, dass die `shadcn-ui`-CLI konfiguriert und die notwendigen Primitiven über `npx shadcn-ui@latest add` installiert wurden.

Ist der Code mit Next.js kompatibel?

Ja. Die generierte Ausgabe verwendet standardmäßige React- und Tailwind-CSS-Konventionen, die in Next.js, Vite und anderen modernen Frameworks funktionieren.

Unterstützt dies TypeScript?

Der Generator liefert standardmäßig TypeScript-first-Code, einschließlich der notwendigen Typen für Props und Komponenten-Refs.

Kann ich das Styling anpassen?

Die Ausgabe verwendet Tailwind CSS Utility-Klassen. Sie können die generierten Klassen direkt in Ihrem Editor ändern, um Ihre spezifischen Designanforderungen zu erfüllen.

Formatierer & Code

shadcn/ui Komponenten-Generator

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

Anmerkung der Redaktion

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

Dieses ausführliche Kapitel ist derzeit nur auf Englisch verfügbar. Das Konvertierungstool oben funktioniert in Ihrer Sprache; der lange Erklärtext wurde noch nicht übersetzt.

Häufig gestellte Fragen

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.

Andere suchten auch nach

Verwandte Tools

More in this room.

Alle anzeigen in Formatierer & Code