Preciso instalar o shadcn/ui primeiro?

Sim. Esta ferramenta gera código que assume que o CLI `shadcn-ui` está configurado e que as primitivas necessárias estão instaladas via `npx shadcn-ui@latest add`.

O código é compatível com Next.js?

Sim. O output gerado usa as convenções padrão de React e Tailwind CSS que funcionam em Next.js, Vite e outros frameworks modernos.

O gerador fornece código TypeScript-first por padrão, incluindo os tipos necessários para props e refs de componentes.

Posso personalizar o estilo?

O output usa classes de utilidade Tailwind CSS. Pode modificar as classes geradas diretamente no seu editor para corresponder aos seus requisitos de design específicos.

Formatadores e Código

Gerador de Componentes 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 do editor

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

Este capítulo aprofundado está disponível apenas em inglês no momento. A ferramenta de conversão acima funciona no seu idioma; o artigo explicativo longo ainda não foi traduzido.

Perguntas frequentes

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.

As pessoas também pesquisam por

Ferramentas relacionadas

More in this room.

Ver tudo em Formatadores e Código