117k
New

常见问题解答

Previous

关于运行注册中心的常见问题解答。

常见问题解答

复杂组件是什么样子的？

以下是一个复杂组件的示例，它安装了一个页面、两个组件、一个 Hook、一个格式化日期的工具和一个配置文件。

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hello-world",
  "title": "Hello World",
  "type": "registry:block",
  "description": "一个复杂的 Hello World 组件",
  "files": [
    {
      "path": "registry/new-york/hello-world/page.tsx",
      "type": "registry:page",
      "target": "app/hello/page.tsx"
    },
    {
      "path": "registry/new-york/hello-world/components/hello-world.tsx",
      "type": "registry:component"
    },
    {
      "path": "registry/new-york/hello-world/components/formatted-message.tsx",
      "type": "registry:component"
    },
    {
      "path": "registry/new-york/hello-world/hooks/use-hello.ts",
      "type": "registry:hook"
    },
    {
      "path": "registry/new-york/hello-world/lib/format-date.ts",
      "type": "registry:lib"
    },
    {
      "path": "registry/new-york/hello-world/hello.config.ts",
      "type": "registry:file",
      "target": "~/hello.config.ts"
    }
  ]
}

如何添加新的 Tailwind 颜色？

要添加新颜色，您需要将其添加到 cssVars 下的 light 和 dark 键中。

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hello-world",
  "title": "Hello World",
  "type": "registry:block",
  "description": "一个复杂的 Hello World 组件",
  "files": [
    // ...
  ],
  "cssVars": {
    "light": {
      "brand-background": "oklch(0.205 0.015 18)",
      "brand-accent": "oklch(0.205 0.015 18)"
    },
    "dark": {
      "brand-background": "oklch(0.205 0.015 18)",
      "brand-accent": "oklch(0.205 0.015 18)"
    }
  }
}

CLI 会更新项目的 CSS 文件。更新完成后，新的颜色将可作为实用类使用：bg-brand 和 text-brand-accent。

为什么 registryDependencies 中的 button 没有解析到我的 GitHub 仓库？

裸的注册中心依赖名称会保持现有的 shadcn 行为。button 表示内置的 shadcn button 项目。

对于来自 GitHub 仓库的依赖，请使用完整的 GitHub 项目地址。

registry-item.json
{
  "registryDependencies": ["acme/ui/button"]
}

如何固定一个 GitHub 注册中心项目？

在 GitHub 项目地址后添加 #ref。ref 可以是分支、标签或完整的 commit SHA。

pnpm dlx shadcn@latest add acme/ui/button#v1.2.0

对于已发布的注册中心，建议优先使用标签或完整的 commit SHA。

GitHub 注册中心地址可以使用私有仓库吗？

目前还不可以。GitHub 注册中心地址支持公开的 github.com 仓库。对于私有注册中心，请使用带有身份验证 URL 的命名空间。

如何添加或覆盖 Tailwind 主题变量？

添加或覆盖主题变量需将其添加到 cssVars.theme 下对应的键中。

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hello-world",
  "title": "Hello World",
  "type": "registry:block",
  "description": "一个复杂的 Hello World 组件",
  "files": [
    // ...
  ],
  "cssVars": {
    "theme": {
      "text-base": "3rem",
      "ease-in-out": "cubic-bezier(0.4, 0, 0.2, 1)",
      "font-heading": "Poppins, sans-serif"
    }
  }
}