文档
示例
示例
注册表项的示例：样式、组件、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 区块。
login-01.json
{
"$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 注册表安装区块，并使用您的自定义组件覆盖原始组件。
在 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"
]
}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)"
}
}
}
}添加自定义实用程序
简单实用程序
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 中定义 @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)"
}
}
}
}