块组件

我们邀请社区为 块组件库 贡献内容。与其他开发者分享你的组件和块，共同构建一个高质量、可重用的组件库。

我们希望看到各种类型的块：应用程序、营销、产品等。

设置工作区

Copygit clone https://github.com/shadcn-ui/ui.git

Copygit checkout -b username/my-new-block

Copypnpm install

Copypnpm www:dev

添加块组件

一个块可以是一个单一的组件（例如，UI 组件的一个变体）或一个复杂的组件（例如，仪表盘），包含多个组件、Hooks 和实用工具。

创建新块组件

在 apps/www/registry/new-york/blocks 目录下创建一个新的文件夹。确保文件夹名使用 kebab-case 格式，并且位于 new-york 之下。

Copyapps
└── www
    └── registry
        └── new-york
            └── blocks
                └── dashboard-01

注意： 构建脚本会处理块组件的 default 样式构建。

添加块组件文件

将你的文件添加到块组件文件夹中。如果块组件包含一个页面（可选），它应该是 files 数组中的第一个条目，并且需要有 target 属性，这有助于 CLI 将页面放置在正确的文件路由位置。

Copyapps
└── www
    └── registry
        └── new-york
            └── blocks
                └── dashboard-01
                    ├── index.tsx  # 块组件的主要文件
                    └── styles.ts  # 样式定义文件（可选）

查看块组件

构建脚本完成后，你可以在 http://localhost:3333/blocks/[分类] 或全屏预览页面 http://localhost:3333/view/styles/new-york/dashboard-01 上查看你的块组件。

建筑块组件

你可以通过编辑块组件文件夹中的文件并在浏览器中查看更改来构建块组件。

如果你添加了更多文件，请确保将它们添加到块定义的 files 数组中。

发布块组件

当你准备发布你的块组件时，可以向主仓库提交一个 pull request。

Copypnpm registry:build

Copypnpm registry:capture

分类

categories 属性用于在注册库中组织你的块组件。

添加分类

如果你需要添加新的分类，可以在 apps/www/registry/registry-categories.ts 中添加它。

Copyexport const registryCategories = [
  // ...
  {
    name: "输入",
    slug: "input",
    hidden: false,
  },
]

贡献指南

以下是贡献块组件库时应遵循的一些指南。

• 块定义所需的属性包括：name、description、type、files 和 categories。
• 确保在 registryDependencies 中列出所有注册依赖项。注册依赖项是注册表中的组件名称，例如 input、button、card 等。
• 确保在 dependencies 中列出所有依赖项。依赖项是注册表中包的名称，例如 zod、sonner 等。
• 如果你的块包含一个页面（可选），它应该是 files 数组中的第一个条目，并且需要有 target 属性，这有助于 CLI 将页面放置在正确的文件路由位置。
• 导入应始终使用 @/registry 路径。 例如：import { Input } from "@/registry/new-york/input"。

希望这些指南对你有所帮助！如果你有任何问题或需要进一步的帮助，请随时联系我们。