最初にshadcn/uiをインストールする必要がありますか？

はい。このツールは、`shadcn-ui` CLIが構成されており、`npx shadcn-ui@latest add`を介して必要なプリミティブがインストールされていることを前提としたコードを生成します。

このコードはNext.jsと互換性がありますか？

はい。生成された出力は、Next.js、Vite、およびその他の最新のフレームワークで動作する標準のReactおよびTailwind CSSの規約を使用しています。

TypeScriptをサポートしていますか？

ジェネレーターは、propsとコンポーネントrefに必要な型を含め、デフォルトで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.

すべて表示フォーマッター＆コード