Neumorphism UI

Installation

Neumorphism UI は Base UI primitive を使う shadcn Registry です。コンポーネントのソースと CSS token をプロジェクトへコピーします。React、Tailwind CSS、shadcn CLI が必要です。

1. shadcn を初期化

components.json がない場合は、最初に shadcn を初期化してください。

shadcn 初期化コマンドnpx shadcn@latest init

2. Registry を接続

CLI で namespace と現在の Registry URL を登録します。

Registry 登録コマンドnpx 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 スタイルの dry-runnpx shadcn@latest add @neumorphism-ui/style-sage --dry-run

Install

Sage スタイルをインストールnpx shadcn@latest add @neumorphism-ui/style-sage

ほかの preset と詳細 token は Theme Studioで確認できます。