¿Necesito instalar shadcn/ui primero?

Sí. Esta herramienta genera código que asume que tiene la CLI de `shadcn-ui` configurada y los primitivos necesarios instalados a través de `npx shadcn-ui@latest add`.

¿Es el código compatible con Next.js?

Sí. La salida generada utiliza convenciones estándar de React y Tailwind CSS que funcionan en Next.js, Vite y otros frameworks modernos.

¿Esto soporta TypeScript?

El generador proporciona código TypeScript por defecto, incluyendo los tipos necesarios para props y refs de componentes.

¿Puedo personalizar el estilo?

La salida utiliza clases de utilidad de Tailwind CSS. Puede modificar las clases generadas directamente en su editor para que coincidan con sus requisitos de diseño específicos.

Formateadores y código

Generador 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 del editor

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

Este capítulo en profundidad está disponible solo en inglés por el momento. La herramienta de conversión de arriba funciona en tu idioma; el artículo explicativo extenso aún no se ha traducido.

Preguntas frecuentes

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.

La gente también busca

Herramientas relacionadas

More in this room.

Ver todo en Formateadores y código