Нужно ли сначала устанавливать shadcn/ui?

Да. Этот инструмент генерирует код, предполагающий, что у вас настроен `shadcn-ui` CLI и установлены необходимые примитивы через `npx shadcn-ui@latest add`.

Совместим ли код с Next.js?

Да. Сгенерированный вывод использует стандартные соглашения React и Tailwind CSS, которые работают в Next.js, Vite и других современных фреймворках.

Поддерживает ли это TypeScript?

По умолчанию генератор предоставляет код, ориентированный на TypeScript, включая необходимые типы для props и refs компонентов.

Могу ли я настроить стиль?

На выходе используются служебные классы Tailwind CSS. Вы можете изменять сгенерированные классы непосредственно в своем редакторе, чтобы соответствовать вашим конкретным требованиям к дизайну.

Форматтеры и код

Генератор Компонентов 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

Примечание редактора

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

Эта углублённая глава пока доступна только на английском языке. Инструмент конвертации выше работает на вашем языке; развёрнутая статья ещё не переведена.

Часто задаваемые вопросы

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.

Люди также ищут

Связанные инструменты

More in this room.

Смотреть все в Форматтеры и код