安装 | Neumorphism UI

环境要求

需要 React 19 与 Tailwind CSS v4 项目。组件支持 Next.js 和 Vite。如果尚未初始化 shadcn，请在项目目录中运行。

npx shadcn@latest init

如果 CLI 询问组件库，请选择 Base UI。

@neumorphism-ui 已收录于官方 shadcn 目录。CLI 会自动解析地址，无需单独注册 Registry 即可运行以下命令。

安装一次共享样式，再添加第一个组件。基础样式包含明暗颜色、阴影、圆角和工具函数。

npx shadcn@latest add @neumorphism-ui/neumorphism-ui

在 Next.js 的 app/layout.tsx 或 src/app/layout.tsx，或 Vite 的 src/main.tsx 中导入一次字体 CSS。应用打包工具会同时提供字体文件。

import "pretendard/dist/web/variable/pretendardvariable.css";

npx shadcn@latest add @neumorphism-ui/button

如果 shadcn init 已创建 utils.ts 和 button.tsx，请在安装基础样式和 Button 时同意替换这些初始文件。对于定制过的工具函数或组件，请按下方现有项目的步骤比较并合并更改。

使用分支项目或本地 Registry 地址

若要使用官方地址以外的 Registry，请替换以下端点。通过 CLI 注册，或将 registries 项合并到 components.json，并保留现有别名和设置。

npx shadcn@latest registry add @neumorphism-ui=https://neumorphism-ui.andongmin.com/r/{name}.json

{
  "registries": {
    "@neumorphism-ui": "https://neumorphism-ui.andongmin.com/r/{name}.json"
  }
}

在页面中渲染已安装的 Button。

import { Button } from "@/components/ui/button";

export default function Example() {
  return <Button variant="primary">开始使用</Button>;
}

看到带柔和表面、阴影和蓝色强调色的按钮，表示安装成功。如果仍显示 shadcn 默认按钮，请确认 components/ui/button.tsx 使用了安装的源码。

共享样式会影响整个项目。先提交当前工作，再在安装前检查变化。重点查看全局 CSS、components.json、依赖项和工具函数。

npx shadcn@latest view @neumorphism-ui/neumorphism-ui

npx shadcn@latest add @neumorphism-ui/neumorphism-ui --dry-run

使用各组件页面的安装命令。CLI 会自动安装所需包和依赖组件。已有定制文件时，请比较提议的更改。

npx shadcn@latest add @neumorphism-ui/dialog
npx shadcn@latest add @neumorphism-ui/card

默认 Air 主题包含明暗表面和蓝色强调色。如需其他配色，请安装一个主题。可先通过 dry run 查看变化。

npx shadcn@latest add @neumorphism-ui/style-sage --dry-run

npx shadcn@latest add @neumorphism-ui/style-sage

同时包含明暗令牌，由应用的 .dark 类选择模式。也可以在 Theme Studio 调整颜色、深度、光源和形状，再复制 CSS。

在各组件页面的“组件源码”标签页查看文件和依赖包。安装的文件属于应用，不会自动更新。更新前使用 dry run，与已有定制进行比较。

npx shadcn@latest add @neumorphism-ui/button --dry-run