Czy muszę najpierw zainstalować shadcn/ui?

Tak. To narzędzie generuje kod, który zakłada, że masz skonfigurowany interfejs CLI `shadcn-ui` i niezbędne prymitywy zainstalowane za pomocą `npx shadcn-ui@latest add`.

Czy kod jest zgodny z Next.js?

Tak. Wygenerowany wynik wykorzystuje standardowe konwencje React i Tailwind CSS, które działają w Next.js, Vite i innych nowoczesnych frameworkach.

Czy to obsługuje TypeScript?

Generator domyślnie dostarcza kod w pierwszej kolejności zgodny z TypeScript, w tym niezbędne typy dla propsów i referencji komponentów.

Czy mogę dostosować stylizację?

Wynik używa klas narzędziowych Tailwind CSS. Możesz modyfikować wygenerowane klasy bezpośrednio w edytorze, aby dopasować je do Twoich specyficznych wymagań projektowych.

Formatowanie i Kodowanie

Generator komponentów 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

Notka redakcyjna

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

Ten szczegółowy rozdział jest obecnie dostępny tylko w języku angielskim. Narzędzie konwersji powyżej działa w Twoim języku; długi artykuł objaśniający nie został jeszcze przetłumaczony.

Często zadawane pytania

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.

Ludzie wyszukują również

Powiązane narzędzia

More in this room.

Zobacz wszystkie w Formatowanie i Kodowanie