Neumorphism UI

Installation

Neumorphism UI 是使用 Base UI primitive 的 shadcn Registry，会把组件源码和 CSS token 复制到项目中。需要 React、Tailwind CSS 和 shadcn CLI。

1. 初始化 shadcn

如果项目中没有 components.json，请先初始化 shadcn。

初始化 shadcnnpx shadcn@latest init

2. 连接 Registry

通过 CLI 注册 namespace 和当前 Registry URL。

注册 Registrynpx shadcn@latest registry add @neumorphism-ui=https://neumorphism-ui.dev/r/{name}.json
手动添加到 components.json

namespace 为 @neumorphism-ui，URL 模板为 https://neumorphism-ui.dev/r/{name}.json。

components.json Registry 配置
{
  "registries": {
    "@neumorphism-ui": "https://neumorphism-ui.dev/r/{name}.json"
  }
}

3. 添加组件

共通の基本テーマは最初に一度インストールします。その後の部品追加で選択済みのテーマを再インストールしません。

安装: neumorphism-uinpx shadcn@latest add @neumorphism-ui/neumorphism-ui

安装基础主题后，在Next.js的app/layout.tsx或Vite的src/main.tsx中导入一次字体CSS。

Pretendardimport "pretendard/dist/web/variable/pretendardvariable.css";
安装 Sage 样式npx shadcn@latest add @neumorphism-ui/button --overwrite

--overwrite は初期ボタンを置き換える場合にのみ使います。変更済みのボタンは先にコミットして内容を確認してください。

4. 应用主题

style item 不会更改组件源码，只覆盖调色板、阴影和圆角 token。安装前可通过 dry-run 查看变更。

Dry run

预览 Sage 样式变更npx shadcn@latest add @neumorphism-ui/style-sage --dry-run

Install

安装 Sage 样式npx shadcn@latest add @neumorphism-ui/style-sage

其他 preset 和详细 token 可在 Theme Studio中查看。