🌐 Nodejs.cn
新建

示例

PreviousNext

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

registry:style

扩展 shadcn/ui 的自定义样式

🌐 Custom style that extends shadcn/ui

以下注册表项是扩展 shadcn/ui 的自定义样式。在 npx shadcn init 上，它将：

🌐 The following registry item is a custom style that extends shadcn/ui. On npx shadcn init, it will:

  • 将 @tabler/icons-react 安装为依赖。
  • 将 login-01 块和 calendar 组件添加到项目中。
  • 从远程注册表添加 editor。
  • 将 font-sans 变量设置为 Inter, sans-serif。
  • 在明亮模式和暗黑模式下安装 brand 颜色。
example-style.json
{
  "$schema": "https://shadcn.nodejs.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%"
    }
  }
}

从头开始自定义样式

🌐 Custom style from scratch

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

🌐 The following registry item is a custom style that doesn't extend shadcn/ui. See the extends: none field.

它可用于从头创建新样式，例如自定义组件、CSS 变量、依赖等。

🌐 It can be used to create a new style from scratch i.e custom components, css vars, dependencies, etc.

在 npx shadcn add，以下将会：

🌐 On npx shadcn add, the following will:

  • 将 tailwind-merge 和 clsx 安装为依赖。
  • 从 shadcn/ui 注册表中添加 utils 注册表项。
  • 从远程注册表添加 button、input、label 和 select 组件。
  • 安装新的 CSS 变量：main、bg、border、text、ring。
example-style.json
{
  "$schema": "https://shadcn.nodejs.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

自定义主题

🌐 Custom theme

example-theme.json
{
  "$schema": "https://shadcn.nodejs.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)"
    }
  }
}

自定义颜色

🌐 Custom colors

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

🌐 The following style will init using shadcn/ui defaults and then add a custom brand color.

example-style.json
{
  "$schema": "https://shadcn.nodejs.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

自定义区块

🌐 Custom block

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

🌐 This blocks installs the login-01 block from the shadcn/ui registry.

login-01.json
{
  "$schema": "https://shadcn.nodejs.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"
    }
  ]
}

安装块并覆盖原语

🌐 Install a block and override primitives

你可以从 shadcn/ui 注册表中安装一个块，并使用自定义块覆盖原语。

🌐 You can install a block fromt the shadcn/ui registry and override the primitives using your custom ones.

在 npx shadcn add，以下将会：

🌐 On npx shadcn add, the following will:

  • 从 shadcn/ui 注册表中添加 login-01 块。
  • 使用远程注册表中的 button、input 和 label 原语来覆盖它们。
example-style.json
{
  "$schema": "https://shadcn.nodejs.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 component

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

🌐 A registry:ui item is a reusable UI component. It can have dependencies, registry dependencies, and CSS variables.

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

带有 CSS 变量的 UI 组件

🌐 UI component with CSS variables

sidebar.json
{
  "$schema": "https://shadcn.nodejs.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

实用程序库

🌐 Utility library

registry:lib 项是一个实用库。使用它来共享辅助函数、常量或其他非组件代码。

🌐 A registry:lib item is a utility library. Use it to share helper functions, constants, or other non-component code.

utils.json
{
  "$schema": "https://shadcn.nodejs.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

自定义钩子

🌐 Custom hook

registry:hook 项是一个自定义的 React 钩子。

🌐 A registry:hook item is a custom React hook.

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

带依赖的钩子

🌐 Hook with dependencies

use-debounce.json
{
  "$schema": "https://shadcn.nodejs.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

自定义字体

🌐 Custom font

一个 registry:font 项目安装了一个 Google 字体。font 字段是必填的，用于配置字体系列、提供者、导入名称和 CSS 变量。

🌐 A registry:font item installs a Google Font. The font field is required and configures the font family, provider, import name, and CSS variable.

font-inter.json
{
  "$schema": "https://shadcn.nodejs.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"]
  }
}

等宽字体

🌐 Monospace font

font-jetbrains-mono.json
{
  "$schema": "https://shadcn.nodejs.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"]
  }
}

衬线字体

🌐 Serif font

font-lora.json
{
  "$schema": "https://shadcn.nodejs.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"]
  }
}

带自定义选择器的字体

🌐 Font with custom selector

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

🌐 Use the selector field to apply a font to specific CSS selectors instead of globally on html. This is useful for heading fonts or other targeted font applications.

font-playfair-display.json
{
  "$schema": "https://shadcn.nodejs.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> 上，因此它在全局可用。

🌐 When selector is set, the font utility class (e.g. font-heading) is applied via CSS @apply on the specified selector within @layer base, instead of being added to the <html> element. The CSS variable is still injected on <html> so it's available globally.

registry:base

自定义底座

🌐 Custom base

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

🌐 A registry:base item is a complete design system base. It defines the full set of dependencies, CSS variables, and configuration for a project. The config field is unique to registry:base items.

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

🌐 The config field accepts the following properties (all optional):

PropertyTypeDescription
stylestringThe style name for the base.
iconLibrarystringThe icon library to use (e.g. lucide).
rscbooleanWhether to enable React Server Components. Defaults to false.
tsxbooleanWhether to use TypeScript. Defaults to true.
rtlbooleanWhether to enable right-to-left support. Defaults to false.
menuColor"default" | "inverted"The menu color scheme. Defaults to "default".
menuAccent"subtle" | "bold"The menu accent style. Defaults to "subtle".
tailwind.baseColorstringThe base color name (e.g. neutral, slate, zinc).
tailwind.cssstringPath to the Tailwind CSS file.
tailwind.prefixstringA prefix to add to all Tailwind classes.
aliases.componentsstringImport alias for components.
aliases.utilsstringImport alias for utilities.
aliases.uistringImport alias for UI components.
aliases.libstringImport alias for lib.
aliases.hooksstringImport alias for hooks.
registriesRecord<string, string | object>Custom registry URLs. Keys must start with @.
custom-base.json
{
  "$schema": "https://shadcn.nodejs.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": {}
      }
    }
  }
}

从零开始建立

🌐 Base from scratch

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

🌐 Use extends: none to create a base that doesn't extend shadcn/ui defaults.

custom-base.json
{
  "$schema": "https://shadcn.nodejs.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)"
    }
  }
}

常用字段

🌐 Common Fields

作者

🌐 Author

使用 author 字段为你的注册表项添加归属信息。

🌐 Use the author field to add attribution to your registry items.

example-item.json
{
  "$schema": "https://shadcn.nodejs.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 字段将软件包安装为开发依赖。

🌐 Use the devDependencies field to install packages as dev dependencies.

example-item.json
{
  "$schema": "https://shadcn.nodejs.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 字段将任意元数据附加到你的注册表项。这可以用于存储你的工具或脚本可以使用的自定义数据。

🌐 Use the meta field to attach arbitrary metadata to your registry items. This can be used to store custom data that your tools or scripts can use.

example-item.json
{
  "$schema": "https://shadcn.nodejs.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 变量

🌐 CSS Variables

自定义主题变量

🌐 Custom Theme Variables

向 theme 对象添加自定义主题变量。

🌐 Add custom theme variables to the theme object.

example-theme.json
{
  "$schema": "https://shadcn.nodejs.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 变量

🌐 Override Tailwind CSS variables

example-theme.json
{
  "$schema": "https://shadcn.nodejs.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

🌐 Add custom CSS

基础样式

🌐 Base styles

example-base.json
{
  "$schema": "https://shadcn.nodejs.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)"
      }
    }
  }
}

组件

🌐 Components

example-card.json
{
  "$schema": "https://shadcn.nodejs.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)"
      }
    }
  }
}

添加自定义实用程序

🌐 Add custom utilities

简单实用工具

🌐 Simple utility

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

复杂实用程序

🌐 Complex utility

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

功能实用程序

🌐 Functional utilities

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

添加 CSS 导入

🌐 Add CSS imports

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

🌐 Use @import to add CSS imports to your registry item. The imports will be placed at the top of the CSS file.

基本导入

🌐 Basic import

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

使用 url() 语法导入

🌐 Import with url() syntax

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

使用媒体查询导入

🌐 Import with media queries

example-media-import.json
{
  "$schema": "https://shadcn.nodejs.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)": {}
  }
}

添加自定义插件

🌐 Add custom plugins

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

🌐 Use @plugin to add Tailwind plugins to your registry item. Plugins will be automatically placed after imports and before other content.

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

基础插件使用

🌐 Basic plugin usage

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

带 npm 依赖的插件

🌐 Plugin with npm dependency

在使用像 @tailwindcss/typography 这样的 npm 包中的插件时，将它们包含在依赖中。

🌐 When using plugins from npm packages like @tailwindcss/typography, include them in the dependencies.

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

作用域和基于文件的插件

🌐 Scoped and file-based plugins

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

具有自动排序的多个插件

🌐 Multiple plugins with automatic ordering

当你添加多个插件时，它们会被自动分组并去重。

🌐 When you add multiple plugins, they are automatically grouped together and deduplicated.

example-multiple-plugins.json
{
  "$schema": "https://shadcn.nodejs.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\"": {}
  }
}

组合导入和插件

🌐 Combined imports and plugins

当同时使用 @import 和 @plugin 指令时，导入内容放在最前，其次是插件，然后是其他 CSS 内容。

🌐 When using both @import and @plugin directives, imports are placed first, followed by plugins, then other CSS content.

example-combined.json
{
  "$schema": "https://shadcn.nodejs.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.com/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"
    }
  }
}

添加自定义动画

🌐 Add custom animations

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

🌐 Note: you need to define both @keyframes in css and theme in cssVars to use animations.

example-component.json
{
  "$schema": "https://shadcn.nodejs.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)"
      }
    }
  }
}

添加环境变量

🌐 Add environment variables

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

🌐 You can add environment variables using the envVars field.

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

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

🌐 Environment variables are added to the .env.local or .env file. Existing variables are not overwritten.

通用条目

🌐 Universal Items

截至 2.9.0，你可以创建无需框架检测或 components.json 即可安装的通用项目。

🌐 As of 2.9.0, you can create universal items that can be installed without framework detection or components.json.

为了使一个项目通用，即不依赖特定框架，该项目中的所有文件必须有明确的目标。

🌐 To make an item universal i.e framework agnostic, all the files in the item must have an explicit target.

这是一个注册表项的示例，用于为 python 安装自定义 Cursor 规则：

🌐 Here's an example of a registry item that installs custom Cursor rules for python:

.cursor/rules/custom-python.mdc
{
  "$schema": "https://shadcn.nodejs.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 配置的示例：

🌐 Here's another example for installation custom ESLint config:

.eslintrc.json
{
  "$schema": "https://shadcn.nodejs.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": "..."
    }
  ]
}

你也可以有一个安装多个文件的通用项目：

🌐 You can also have a universal item that installs multiple files:

my-custom-starter-template.json
{
  "$schema": "https://shadcn.nodejs.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": "..."
    }
  ]
}