インストール | 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 のアドレスを使う場合

公式アドレス以外を使う場合は、以下のエンドポイントを変更してください。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