shadcn/ui를 먼저 설치해야 하나요?

네. 이 도구는 `shadcn-ui` CLI가 구성되어 있고 `npx shadcn-ui@latest add`를 통해 필요한 기본 요소가 설치되어 있다고 가정하는 코드를 생성합니다.

코드가 Next.js와 호환되나요?

네. 생성된 출력은 Next.js, Vite 및 기타 최신 프레임워크에서 작동하는 표준 React 및 Tailwind CSS 규칙을 사용합니다.

TypeScript를 지원하나요?

이 생성기는 기본적으로 props 및 컴포넌트 refs에 필요한 유형을 포함하여 TypeScript 우선 코드를 제공합니다.

스타일을 사용자 지정할 수 있나요?

출력은 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.

모두 보기 포매터 및 코드