我需要先安装 shadcn/ui 吗？

是的。此工具生成的代码假定您已配置 `shadcn-ui` CLI 并通过 `npx shadcn-ui@latest add` 安装了必要的基元。

该代码与 Next.js 兼容吗？

是的。生成的输出使用 Next.js、Vite 和其他现代框架中可用的标准 React 和 Tailwind CSS 约定。

这支持 TypeScript 吗？

生成器默认提供 TypeScript-first 代码，包括 props 和组件引用所需的类型。

可以自定义样式吗？

输出使用 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.

查看所有格式化与代码