概要
柔らかな表面と明確な操作状態で、一貫した React インターフェイスを作れます。
Neumorphism UI は光と影で奥行きを表現する React コンポーネント集です。shadcn CLI で必要なソースをプロジェクトに導入し、自由に確認・編集できます。
ここから始める
- インストールガイドに従い、共有スタイルと Button を追加します。
- アプリで最初のボタンが正しく表示されることを確認します。
- 一覧から必要なコンポーネントだけを追加します。
最初のコンポーネントを使う前に、デザイントークンや Registry の内部構造をすべて理解する必要はありません。
完成した画面を試す
ローカル CMS で下書きを選び、タイトルと本文を編集してからプレビューと保存を試してください。選択・入力・フィードバックの連携を確認できます。
デモの変更はメモリ内に残り、再読み込みでリセットされます。実際のアプリでは initialPosts と onSave にデータを接続し、認証・保存・公開権限を処理してください。
画面構成の原則
奥行きに役割を持たせる
浮き上がった表面は操作を、くぼんだ表面は入力や押下状態を表します。入れ子の領域ごとに影を追加するより、関連する内容を一つの表面にまとめてください。
選択状態を見せ続ける
選択したタブやフィルターはポインターが離れても区別できるようにします。色や形で選択を示し、キーボードフォーカスは別に表示してください。
光と形を統一する
画面内で光の方向と表面の半径を共有してください。Theme Studio で色・深さ・光源・形を一緒に調整できます。
入力とフィードバックを明確にする
ラベルを表示し、エラーは対応する入力の近くで説明してください。保存状態を伝え、動きを減らした場合も選択・フォーカス・エラーを残してください。
含まれるもの
- 必要に応じて Base UI のキーボード・フォーカス操作を使う React 19 コンポーネント
- ライト・ダークの色、奥行き、光源、形を管理する Tailwind CSS v4 トークン
- アプリに直接導入して編集できるコンポーネントソース
- 実用的な組み合わせを示すチャートと画面テンプレート
インストールとカスタマイズ
shadcn CLI は選んだソースと必要なパッケージをプロジェクトに追加します。導入したファイルはアプリのコードとなり、自動更新されません。更新時は独自の変更と比較してください。
導入後はデザイントークンで画面を調整できます。Registry の構成や検証範囲は必要に応じて参照してください。