示例 - shadcn 中文网

Docs

示例

注册表项示例：样式、组件、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 安装为依赖。

¥Install @tabler/icons-react as a dependency.
将 login-01 块和 calendar 组件添加到项目。

¥Add the login-01 block and calendar component to the project.
从远程注册表添加 editor。

¥Add the editor from a remote registry.
将 font-sans 变量设置为 Inter, sans-serif。

¥Set the font-sans variable to Inter, sans-serif.
在明夜间模式下安装 brand 颜色。

¥Install a brand color in light and dark mode.

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 安装为依赖。

¥Install tailwind-merge and clsx as dependencies.
从 shadcn/ui 注册表添加 utils 注册表项。

¥Add the utils registry item from the shadcn/ui registry.
从远程仓库添加 button、input、label 和 select 组件。

¥Add the button, input, label, and select components from a remote registry.
安装新的 CSS 变量：main, bg, border, text, ring.

¥Install new css vars: 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.

{
  "$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 块。

¥Add the login-01 block from the shadcn/ui registry.
用远程注册表中的原语覆盖 button、input 和 label。

¥Override the button, input, and label primitives with the ones from the remote registry.

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"
  ]
}

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-*)"
    }
  }
}

添加自定义动画

¥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)"
      }
    }
  }
}

入门在 v0 中打开