文档
FAQ

FAQ

关于运行组件库的常见问题。

常见问题

复杂组件是什么样的？

这是一个复杂组件的示例，它安装一个页面、两个组件、一个 Hook、一个 format-date 工具函数和一个配置文件。

{
  "$schema": "https://ui.shadcn.org.cn/schema/registry-item.json",
  "name": "hello-world",
  "title": "Hello World",
  "type": "registry:block",
  "description": "A complex hello world component",
  "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:utils"
    },
    {
      "path": "registry/new-york/hello-world/hello.config.ts",
      "type": "registry:file",
      "target": "~/hello.config.ts"
    }
  ]
}

如何添加新的 Tailwind 颜色？

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

{
  "$schema": "https://ui.shadcn.org.cn/schema/registry-item.json",
  "name": "hello-world",
  "title": "Hello World",
  "type": "registry:block",
  "description": "A complex hello world component",
  "files": [
    // ...
  ],
  "cssVars": {
    "light": {
      "brand-background": "20 14.3% 4.1%",
      "brand-accent": "20 14.3% 4.1%"
    },
    "dark": {
      "brand-background": "20 14.3% 4.1%",
      "brand-accent": "20 14.3% 4.1%"
    }
  }
}

CLI 将更新项目 CSS 文件。更新后，新颜色将可用作实用程序类：bg-brand 和 text-brand-accent。

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

要添加或覆盖主题变量，请将其添加到您要添加或覆盖的键下的 cssVars.theme 中。

{
  "$schema": "https://ui.shadcn.org.cn/schema/registry-item.json",
  "name": "hello-world",
  "title": "Hello World",
  "type": "registry:block",
  "description": "A complex hello world component",
  "files": [
    // ...
  ],
  "cssVars": {
    "theme": {
      "text-base": "3rem",
      "ease-in-out": "cubic-bezier(0.4, 0, 0.2, 1)",
      "font-heading": "Poppins, sans-serif"
    }
  }
}
在 v0 中打开registry.json