示例

注册项示例：样式、组件、CSS 变量等。

registry:style

扩展 shadcn/ui 的自定义样式

以下注册项是一个扩展 shadcn/ui 的自定义样式。执行 npx shadcn init 时，它将：

安装 @tabler/icons-react 作为依赖。
向项目中添加 login-01 区块和 calendar 组件。
从远程注册中心添加 editor。
将 font-sans 变量设置为 Inter, sans-serif。
安装一个浅色和深色模式下的 brand 品牌颜色。

example-style.json

{
  "$schema": "https://ui.shadcn.org.cn/schema/registry-item.json",
  "name": "example-style",
  "type": "registry:style",
  "dependencies": ["@tabler/icons-react"],
  "registryDependencies": [
    "login-01",
    "calendar",
    "https://example.com/r/editor.json"
  ],
  "cssVars": {
    "theme": {
      "font-sans": "Inter, sans-serif"
    },
    "light": {
      "brand": "20 14.3% 4.1%"
    },
    "dark": {
      "brand": "20 14.3% 4.1%"
    }
  }
}

从零开始的自定义样式

以下注册项是一个不扩展 shadcn/ui 的自定义样式。请参考 extends: none 字段。

它可以用于从零开始创建新样式，即自定义组件、CSS 变量、依赖项等。

执行 npx shadcn add 时，以下操作将会：

安装 tailwind-merge 和 clsx 作为依赖项。
从 shadcn/ui 注册中心添加 utils 注册项。
从远程注册中心添加 button、input、label 和 select 组件。
安装新的 CSS 变量：main, bg, border, text, ring。

example-style.json

{
  "$schema": "https://ui.shadcn.org.cn/schema/registry-item.json",
  "extends": "none",
  "name": "new-style",
  "type": "registry:style",
  "dependencies": ["tailwind-merge", "clsx"],
  "registryDependencies": [
    "utils",
    "https://example.com/r/button.json",
    "https://example.com/r/input.json",
    "https://example.com/r/label.json",
    "https://example.com/r/select.json"
  ],
  "cssVars": {
    "theme": {
      "font-sans": "Inter, sans-serif",
    }
    "light": {
      "main": "#88aaee",
      "bg": "#dfe5f2",
      "border": "#000",
      "text": "#000",
      "ring": "#000",
    },
    "dark": {
      "main": "#88aaee",
      "bg": "#272933",
      "border": "#000",
      "text": "#e6e6e6",
      "ring": "#fff",
    }
  }
}

registry:theme

自定义主题

example-theme.json

{
  "$schema": "https://ui.shadcn.org.cn/schema/registry-item.json",
  "name": "custom-theme",
  "type": "registry:theme",
  "cssVars": {
    "light": {
      "background": "oklch(1 0 0)",
      "foreground": "oklch(0.141 0.005 285.823)",
      "primary": "oklch(0.546 0.245 262.881)",
      "primary-foreground": "oklch(0.97 0.014 254.604)",
      "ring": "oklch(0.746 0.16 232.661)",
      "sidebar-primary": "oklch(0.546 0.245 262.881)",
      "sidebar-primary-foreground": "oklch(0.97 0.014 254.604)",
      "sidebar-ring": "oklch(0.746 0.16 232.661)"
    },
    "dark": {
      "background": "oklch(1 0 0)",
      "foreground": "oklch(0.141 0.005 285.823)",
      "primary": "oklch(0.707 0.165 254.624)",
      "primary-foreground": "oklch(0.97 0.014 254.604)",
      "ring": "oklch(0.707 0.165 254.624)",
      "sidebar-primary": "oklch(0.707 0.165 254.624)",
      "sidebar-primary-foreground": "oklch(0.97 0.014 254.604)",
      "sidebar-ring": "oklch(0.707 0.165 254.624)"
    }
  }
}

自定义颜色

以下样式将使用 shadcn/ui 默认值初始化，然后添加自定义 brand 颜色。

example-style.json

{
  "$schema": "https://ui.shadcn.org.cn/schema/registry-item.json",
  "name": "custom-style",
  "type": "registry:style",
  "cssVars": {
    "light": {
      "brand": "oklch(0.99 0.00 0)"
    },
    "dark": {
      "brand": "oklch(0.14 0.00 286)"
    }
  }
}

registry:block

自定义区块

此区块从 shadcn/ui 注册中心安装 login-01 区块。

{
  "$schema": "https://ui.shadcn.org.cn/schema/registry-item.json",
  "name": "login-01",
  "type": "registry:block",
  "description": "A simple login form.",
  "registryDependencies": ["button", "card", "input", "label"],
  "files": [
    {
      "path": "blocks/login-01/page.tsx",
      "content": "import { LoginForm } ...",
      "type": "registry:page",
      "target": "app/login/page.tsx"
    },
    {
      "path": "blocks/login-01/components/login-form.tsx",
      "content": "...",
      "type": "registry:component"
    }
  ]
}

安装区块并覆盖原语

您可以从 shadcn/ui 注册中心安装区块，并使用自定义的原语（primitives）覆盖它们。

执行 npx shadcn add 时，以下操作将会：

从 shadcn/ui 注册中心添加 login-01 区块。
使用远程注册中心中的原语覆盖 button、input 和 label。

example-style.json

{
  "$schema": "https://ui.shadcn.org.cn/schema/registry-item.json",
  "name": "custom-login",
  "type": "registry:block",
  "registryDependencies": [
    "login-01",
    "https://example.com/r/button.json",
    "https://example.com/r/input.json",
    "https://example.com/r/label.json"
  ]
}

registry:ui

UI 组件

registry:ui 项是一个可复用的 UI 组件。它可以拥有依赖项、注册中心依赖项和 CSS 变量。

button.json

{
  "$schema": "https://ui.shadcn.org.cn/schema/registry-item.json",
  "name": "button",
  "type": "registry:ui",
  "dependencies": ["radix-ui"],
  "files": [
    {
      "path": "ui/button.tsx",
      "content": "...",
      "type": "registry:ui"
    }
  ]
}

带有 CSS 变量的 UI 组件

sidebar.json

{
  "$schema": "https://ui.shadcn.org.cn/schema/registry-item.json",
  "name": "sidebar",
  "type": "registry:ui",
  "dependencies": ["radix-ui"],
  "registryDependencies": ["button", "separator", "sheet", "tooltip"],
  "files": [
    {
      "path": "ui/sidebar.tsx",
      "content": "...",
      "type": "registry:ui"
    }
  ],
  "cssVars": {
    "light": {
      "sidebar-background": "oklch(0.985 0 0)",
      "sidebar-foreground": "oklch(0.141 0.005 285.823)",
      "sidebar-border": "oklch(0.92 0.004 286.32)"
    },
    "dark": {
      "sidebar-background": "oklch(0.141 0.005 285.823)",
      "sidebar-foreground": "oklch(0.985 0 0)",
      "sidebar-border": "oklch(0.274 0.006 286.033)"
    }
  }
}

registry:lib

工具库

registry:lib 项是一个工具库。用于共享辅助函数、常量或其他非组件代码。

utils.json

{
  "$schema": "https://ui.shadcn.org.cn/schema/registry-item.json",
  "name": "utils",
  "type": "registry:lib",
  "dependencies": ["clsx", "tailwind-merge"],
  "files": [
    {
      "path": "lib/utils.ts",
      "content": "import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}",
      "type": "registry:lib"
    }
  ]
}

registry:hook

自定义 Hook

registry:hook 项是一个自定义 React Hook。

use-mobile.json

{
  "$schema": "https://ui.shadcn.org.cn/schema/registry-item.json",
  "name": "use-mobile",
  "type": "registry:hook",
  "files": [
    {
      "path": "hooks/use-mobile.ts",
      "content": "...",
      "type": "registry:hook"
    }
  ]
}

带有依赖项的 Hook

use-debounce.json

{
  "$schema": "https://ui.shadcn.org.cn/schema/registry-item.json",
  "name": "use-debounce",
  "type": "registry:hook",
  "dependencies": ["react"],
  "files": [
    {
      "path": "hooks/use-debounce.ts",
      "content": "...",
      "type": "registry:hook"
    }
  ]
}

registry:font

自定义字体

registry:font 项用于安装 Google 字体。font 字段是必需的，用于配置字体族、提供商、导入名称和 CSS 变量。

font-inter.json

{
  "$schema": "https://ui.shadcn.org.cn/schema/registry-item.json",
  "name": "font-inter",
  "type": "registry:font",
  "font": {
    "family": "'Inter Variable', sans-serif",
    "provider": "google",
    "import": "Inter",
    "variable": "--font-sans",
    "subsets": ["latin"]
  }
}

等宽字体

font-jetbrains-mono.json

{
  "$schema": "https://ui.shadcn.org.cn/schema/registry-item.json",
  "name": "font-jetbrains-mono",
  "type": "registry:font",
  "font": {
    "family": "'JetBrains Mono Variable', monospace",
    "provider": "google",
    "import": "JetBrains_Mono",
    "variable": "--font-mono",
    "weight": ["400", "500", "600", "700"],
    "subsets": ["latin"]
  }
}

衬线字体

font-lora.json

{
  "$schema": "https://ui.shadcn.org.cn/schema/registry-item.json",
  "name": "font-lora",
  "type": "registry:font",
  "font": {
    "family": "'Lora Variable', serif",
    "provider": "google",
    "import": "Lora",
    "variable": "--font-serif",
    "subsets": ["latin"]
  }
}

具有自定义选择器的字体

使用 selector 字段将字体应用于特定的 CSS 选择器，而不是全局应用于 html。这对于标题字体或其他有针对性的字体应用非常有用。

font-playfair-display.json

{
  "$schema": "https://ui.shadcn.org.cn/schema/registry-item.json",
  "name": "font-playfair-display",
  "type": "registry:font",
  "font": {
    "family": "'Playfair Display Variable', serif",
    "provider": "google",
    "import": "Playfair_Display",
    "variable": "--font-heading",
    "subsets": ["latin"],
    "selector": "h1, h2, h3, h4, h5, h6"
  }
}

当设置了 selector 时，字体工具类（例如 font-heading）会通过 CSS 的 @apply 应用于指定的选择器（在 @layer base 内部），而不是添加到 <html> 元素上。CSS 变量仍然会注入到 <html> 中，以便全局可用。

registry:base

自定义基础

registry:base 项是一个完整的设计系统基础。它定义了项目的全套依赖项、CSS 变量和配置。config 字段是 registry:base 项所独有的。

config 字段接受以下属性（均为可选）

属性	类型	描述
`style`	`string`	基础样式的名称。
`iconLibrary`	`string`	要使用的图标库（例如 `lucide`）。
`rsc`	`布尔值`	是否启用 React 服务器组件。默认为 `false`。
`tsx`	`布尔值`	是否使用 TypeScript。默认为 `true`。
`rtl`	`布尔值`	是否启用从右到左 (RTL) 支持。默认为 `false`。
`menuColor`	`"default"（默认） \| "inverted"（反色）`	菜单颜色方案。默认为 `"default"`。
`menuAccent`	`"subtle"（细微） \| "bold"（粗体）`	菜单强调样式。默认为 `"subtle"`。
`tailwind.baseColor`	`string`	基础颜色名称（例如 `neutral`, `slate`, `zinc`）。
`tailwind.css`	`string`	Tailwind CSS 文件的路径。
`tailwind.prefix`	`string`	添加到所有 Tailwind 类名的前缀。
`aliases.components`	`string`	组件的导入别名。
`aliases.utils`	`string`	工具函数的导入别名。
`aliases.ui`	`string`	UI 组件的导入别名。
`aliases.lib`	`string`	库的导入别名。
`aliases.hooks`	`string`	Hook 的导入别名。
`注册表列表`	`Record<string, string \| object>`	自定义注册中心 URL。键名必须以 `@` 开头。

custom-base.json

{
  "$schema": "https://ui.shadcn.org.cn/schema/registry-item.json",
  "name": "custom-base",
  "type": "registry:base",
  "config": {
    "style": "custom-base",
    "iconLibrary": "lucide",
    "tailwind": {
      "baseColor": "neutral"
    }
  },
  "dependencies": [
    "class-variance-authority",
    "tw-animate-css",
    "lucide-react"
  ],
  "registryDependencies": ["utils", "font-inter"],
  "cssVars": {
    "light": {
      "background": "oklch(1 0 0)",
      "foreground": "oklch(0.141 0.005 285.823)",
      "primary": "oklch(0.21 0.006 285.885)",
      "primary-foreground": "oklch(0.985 0 0)"
    },
    "dark": {
      "background": "oklch(0.141 0.005 285.823)",
      "foreground": "oklch(0.985 0 0)",
      "primary": "oklch(0.985 0 0)",
      "primary-foreground": "oklch(0.21 0.006 285.885)"
    }
  },
  "css": {
    "@import \"tw-animate-css\"": {},
    "@layer base": {
      "*": {
        "@apply border-border outline-ring/50": {}
      },
      "body": {
        "@apply bg-background text-foreground": {}
      }
    }
  }
}

从零开始的基础

使用 extends: none 创建一个不扩展 shadcn/ui 默认值的基础。

custom-base.json

{
  "$schema": "https://ui.shadcn.org.cn/schema/registry-item.json",
  "name": "my-design-system",
  "extends": "none",
  "type": "registry:base",
  "config": {
    "style": "my-design-system",
    "iconLibrary": "lucide",
    "tailwind": {
      "baseColor": "slate"
    }
  },
  "dependencies": ["tailwind-merge", "clsx", "tw-animate-css", "lucide-react"],
  "registryDependencies": ["utils", "font-geist"],
  "cssVars": {
    "light": {
      "background": "oklch(1 0 0)",
      "foreground": "oklch(0.141 0.005 285.823)"
    },
    "dark": {
      "background": "oklch(0.141 0.005 285.823)",
      "foreground": "oklch(0.985 0 0)"
    }
  }
}

通用字段

作者 (Author)

使用 author 字段为您的注册项添加署名。

example-item.json

{
  "$schema": "https://ui.shadcn.org.cn/schema/registry-item.json",
  "name": "custom-component",
  "type": "registry:ui",
  "author": "shadcn",
  "files": [
    {
      "path": "ui/custom-component.tsx",
      "content": "...",
      "type": "registry:ui"
    }
  ]
}

开发依赖项 (Dev dependencies)

使用 devDependencies 字段安装开发依赖包。

example-item.json

{
  "$schema": "https://ui.shadcn.org.cn/schema/registry-item.json",
  "name": "custom-item",
  "type": "registry:item",
  "devDependencies": ["@types/mdx"],
  "files": [
    {
      "path": "lib/mdx.ts",
      "content": "...",
      "type": "registry:lib"
    }
  ]
}

元数据 (Metadata)

使用 meta 字段为注册项附加任意元数据。这可用于存储您的工具或脚本所需的自定义数据。

example-item.json

{
  "$schema": "https://ui.shadcn.org.cn/schema/registry-item.json",
  "name": "custom-component",
  "type": "registry:ui",
  "meta": {
    "category": "forms",
    "version": "2.0.0"
  },
  "files": [
    {
      "path": "ui/custom-component.tsx",
      "content": "...",
      "type": "registry:ui"
    }
  ]
}

CSS 变量

自定义主题变量

将自定义主题变量添加到 theme 对象中。

example-theme.json

{
  "$schema": "https://ui.shadcn.org.cn/schema/registry-item.json",
  "name": "custom-theme",
  "type": "registry:theme",
  "cssVars": {
    "theme": {
      "font-heading": "Inter, sans-serif",
      "shadow-card": "0 0 0 1px rgba(0, 0, 0, 0.1)"
    }
  }
}

覆盖 Tailwind CSS 变量

example-theme.json

{
  "$schema": "https://ui.shadcn.org.cn/schema/registry-item.json",
  "name": "custom-theme",
  "type": "registry:theme",
  "cssVars": {
    "theme": {
      "spacing": "0.2rem",
      "breakpoint-sm": "640px",
      "breakpoint-md": "768px",
      "breakpoint-lg": "1024px",
      "breakpoint-xl": "1280px",
      "breakpoint-2xl": "1536px"
    }
  }
}

添加自定义 CSS

基础样式

example-base.json

{
  "$schema": "https://ui.shadcn.org.cn/schema/registry-item.json",
  "name": "custom-style",
  "type": "registry:style",
  "css": {
    "@layer base": {
      "h1": {
        "font-size": "var(--text-2xl)"
      },
      "h2": {
        "font-size": "var(--text-xl)"
      }
    }
  }
}

组件

example-card.json

{
  "$schema": "https://ui.shadcn.org.cn/schema/registry-item.json",
  "name": "custom-card",
  "type": "registry:component",
  "css": {
    "@layer components": {
      "card": {
        "background-color": "var(--color-white)",
        "border-radius": "var(--rounded-lg)",
        "padding": "var(--spacing-6)",
        "box-shadow": "var(--shadow-xl)"
      }
    }
  }
}

添加自定义工具类 (Utilities)

简单工具类

example-component.json

{
  "$schema": "https://ui.shadcn.org.cn/schema/registry-item.json",
  "name": "custom-component",
  "type": "registry:component",
  "css": {
    "@utility content-auto": {
      "content-visibility": "auto"
    }
  }
}

复杂工具类

example-utility.json

{
  "$schema": "https://ui.shadcn.org.cn/schema/registry-item.json",
  "name": "custom-component",
  "type": "registry:component",
  "css": {
    "@utility scrollbar-hidden": {
      "scrollbar-hidden": {
        "&::-webkit-scrollbar": {
          "display": "none"
        }
      }
    }
  }
}

功能性工具类

example-functional.json

{
  "$schema": "https://ui.shadcn.org.cn/schema/registry-item.json",
  "name": "custom-component",
  "type": "registry:component",
  "css": {
    "@utility tab-*": {
      "tab-size": "var(--tab-size-*)"
    }
  }
}

添加 CSS 导入

使用 @import 将 CSS 导入添加到您的注册项。这些导入将放置在 CSS 文件的顶部。

基础导入

example-import.json

{
  "$schema": "https://ui.shadcn.org.cn/schema/registry-item.json",
  "name": "custom-import",
  "type": "registry:component",
  "css": {
    "@import \"tailwindcss\"": {},
    "@import \"./styles/base.css\"": {}
  }
}

带有 url() 语法的导入

example-url-import.json

{
  "$schema": "https://ui.shadcn.org.cn/schema/registry-item.json",
  "name": "font-import",
  "type": "registry:item",
  "css": {
    "@import url(\"https://fonts.googleapis.ac.cn/css2?family=Inter:wght@400;500;600&display=swap\")": {},
    "@import url('./local-styles.css')": {}
  }
}

带有媒体查询的导入

example-media-import.json

{
  "$schema": "https://ui.shadcn.org.cn/schema/registry-item.json",
  "name": "responsive-import",
  "type": "registry:item",
  "css": {
    "@import \"print-styles.css\" print": {},
    "@import url(\"mobile.css\") screen and (max-width: 768px)": {}
  }
}

添加自定义插件

使用 @plugin 为您的注册项添加 Tailwind 插件。插件将自动放置在导入之后、其他内容之前。

重要提示： 当使用 npm 包中的插件时，还必须将它们添加到 dependencies 数组中。

基础插件使用

example-plugin.json

{
  "$schema": "https://ui.shadcn.org.cn/schema/registry-item.json",
  "name": "custom-plugin",
  "type": "registry:item",
  "css": {
    "@plugin \"@tailwindcss/typography\"": {},
    "@plugin \"foo\"": {}
  }
}

带 npm 依赖的插件

当使用像 @tailwindcss/typography 这样的 npm 包插件时，请务必将其包含在依赖项中。

example-typography.json

{
  "$schema": "https://ui.shadcn.org.cn/schema/registry-item.json",
  "name": "typography-component",
  "type": "registry:item",
  "dependencies": ["@tailwindcss/typography"],
  "css": {
    "@plugin \"@tailwindcss/typography\"": {},
    "@layer components": {
      ".prose": {
        "max-width": "65ch"
      }
    }
  }
}

作用域和基于文件的插件

example-scoped-plugin.json

{
  "$schema": "https://ui.shadcn.org.cn/schema/registry-item.json",
  "name": "scoped-plugins",
  "type": "registry:component",
  "css": {
    "@plugin \"@headlessui/tailwindcss\"": {},
    "@plugin \"tailwindcss/plugin\"": {},
    "@plugin \"./custom-plugin.js\"": {}
  }
}

带自动排序的多插件

当您添加多个插件时，它们会自动组合在一起并进行去重处理。

example-multiple-plugins.json

{
  "$schema": "https://ui.shadcn.org.cn/schema/registry-item.json",
  "name": "multiple-plugins",
  "type": "registry:item",
  "dependencies": [
    "@tailwindcss/typography",
    "@tailwindcss/forms",
    "tw-animate-css"
  ],
  "css": {
    "@plugin \"@tailwindcss/typography\"": {},
    "@plugin \"@tailwindcss/forms\"": {},
    "@plugin \"tw-animate-css\"": {}
  }
}

组合使用导入和插件

当同时使用 @import 和 @plugin 指令时，导入会被首先放置，接着是插件，最后是其他 CSS 内容。

example-combined.json

{
  "$schema": "https://ui.shadcn.org.cn/schema/registry-item.json",
  "name": "combined-example",
  "type": "registry:item",
  "dependencies": ["@tailwindcss/typography", "tw-animate-css"],
  "css": {
    "@import \"tailwindcss\"": {},
    "@import url(\"https://fonts.googleapis.ac.cn/css2?family=Inter:wght@400;500;600&display=swap\")": {},
    "@plugin \"@tailwindcss/typography\"": {},
    "@plugin \"tw-animate-css\"": {},
    "@layer base": {
      "body": {
        "font-family": "Inter, sans-serif"
      }
    },
    "@utility content-auto": {
      "content-visibility": "auto"
    }
  }
}

添加自定义动画

注意：您需要在 CSS 中定义 @keyframes，并在 cssVars 中定义 theme 才能使用动画。

example-component.json

{
  "$schema": "https://ui.shadcn.org.cn/schema/registry-item.json",
  "name": "custom-component",
  "type": "registry:component",
  "cssVars": {
    "theme": {
      "--animate-wiggle": "wiggle 1s ease-in-out infinite"
    }
  },
  "css": {
    "@keyframes wiggle": {
      "0%, 100%": {
        "transform": "rotate(-3deg)"
      },
      "50%": {
        "transform": "rotate(3deg)"
      }
    }
  }
}

添加环境变量

您可以使用 envVars 字段添加环境变量。

example-item.json

{»
  "$schema": "https://ui.shadcn.org.cn/schema/registry-item.json",
  "name": "custom-item",
  "type": "registry:item",
  "envVars": {
    "NEXT_PUBLIC_APP_URL": "https://:4000",
    "DATABASE_URL": "postgresql://postgres:postgres@localhost:5432/postgres",
    "OPENAI_API_KEY": ""
  }
}

环境变量将添加到 .env.local 或 .env 文件中。现有的变量不会被覆盖。

重要提示： 使用 envVars 添加开发或示例变量。不要使用它来添加生产环境的变量。

通用项 (Universal Items)

自 2.9.0 版本起，您可以创建无需框架检测或 components.json 即可安装的通用项。

要使一项通用（即与框架无关），项中的所有文件都必须具有明确的目标。

以下是一个安装自定义 Python Cursor 规则的注册项示例：

.cursor/rules/custom-python.mdc

{
  "$schema": "https://ui.shadcn.org.cn/schema/registry-item.json",
  "name": "python-rules",
  "type": "registry:item",
  "files": [
    {
      "path": "/path/to/your/registry/default/custom-python.mdc",
      "type": "registry:file",
      "target": "~/.cursor/rules/custom-python.mdc",
      "content": "..."
    }
  ]
}

这是另一个安装自定义 ESLint 配置的示例：

.eslintrc.json

{
  "$schema": "https://ui.shadcn.org.cn/schema/registry-item.json",
  "name": "my-eslint-config",
  "type": "registry:item",
  "files": [
    {
      "path": "/path/to/your/registry/default/custom-eslint.json",
      "type": "registry:file",
      "target": "~/.eslintrc.json",
      "content": "..."
    }
  ]
}

您还可以创建一个安装多个文件的通用项：

my-custom-starter-template.json

{
  "$schema": "https://ui.shadcn.org.cn/schema/registry-item.json",
  "name": "my-custom-start-template",
  "type": "registry:item",
  "dependencies": ["better-auth"],
  "files": [
    {
      "path": "/path/to/file-01.json",
      "type": "registry:file",
      "target": "~/file-01.json",
      "content": "..."
    },
    {
      "path": "/path/to/file-02.vue",
      "type": "registry:file",
      "target": "~/pages/file-02.vue",
      "content": "..."
    }
  ]
}

身份验证 (Authentication)MCP 服务器

本页内容

registry:style 扩展 shadcn/ui 的自定义样式从零开始的自定义样式 registry:theme 自定义主题自定义颜色 registry:block 自定义区块安装区块并覆盖原语 registry:ui UI 组件带有 CSS 变量的 UI 组件 registry:lib 工具库 registry:hook 自定义 Hook 带有依赖项的 Hook registry:font 自定义字体等宽字体衬线字体具有自定义选择器的字体 registry:base 自定义基础从零开始的基础通用字段作者开发依赖项元数据 CSS 变量自定义主题变量覆盖 Tailwind CSS 变量添加自定义 CSS 基础样式组件添加自定义工具类简单工具类复杂工具类功能性工具类添加 CSS 导入基础导入带有 url() 语法的导入带有媒体查询的导入添加自定义插件基础插件使用带 npm 依赖的插件作用域和基于文件的插件带自动排序的多插件组合使用导入和插件添加自定义动画添加环境变量通用项

在 Vercel 上部署你的 shadcn/ui 应用

OpenAI、Sonos、Adobe 等公司的信任之选。

Vercel 提供工具和基础设施，以规模化部署应用和功能。