panelui-web

Web 向け PanelUI

shadcn/ui をベースに構築された React コンポーネントです。shadcn プロジェクトにすでにあるテーマトークンを使って Tailwind CSS v4 でスタイル設定されているため、特別な設定をしなくても、プロジェクトの色、角丸、ダークモードが反映されます。

これは Web 向けのコレクションです。PanelUI の React Native ライブラリは別パッケージで、別のスキルが必要です。ここにあるものは React Native では動作しません。

UI を作成する前に

1. components.md を読んで、どのコンポーネントがあるか確認してください。カスタムコンポーネントを書く前に、ここにあるコンポーネントを使ってください。
2. 使用する前に、components/ 内にあるコンポーネント自体のファイルを読んでください。ソースから読み取ったインポート行、すべてのパーツとすべてのプロパティが記載されています。プロパティを推測しないでください。
3. プロジェクトのインストール方法を確認してください。@panelui レジストリを指定した components.json がある場合、コンポーネントは shadcn CLI でコピーされます。package.json に panelui-web がある場合は、パッケージからインポートされます。setup.md を参照してください。

ルール

• 色は値ではなく役割です。 色を持つすべてのコンポーネントでは、color="primary" | "info" | "success" | "warning" | "destructive" を指定します。コンポーネント自体の色に、16 進数値や Tailwind のパレットクラスを渡さないでください。theming.md を参照してください。
• 意味に応じて役割を選んでください。 良い内容には success、注意を促す内容には warning、悪い内容には destructive、中立的に強調する内容には info、それ以外には primary を使います。画面上のすべてのコンポーネントに同じ色を使わないでください。
• データには独自のテキストを使ってください。 コンポーネント内のラベル、数値、名前には、プロジェクトのデータを使います。これらのファイルにあるサンプルテキストを再利用しないでください。
• 複合パーツと Server Components。 "use client" のあるファイルでは、パーツをドットで記述します：Planet.Globe。Server Component からはクライアントモジュールのプロパティを参照できないため、その場合は各パーツを名前付きでインポートします：PlanetGlobe。Kpi はクライアントモジュールではないため、どこでもドット記法を使えます。
• フレームで囲んでください。 パネルとして表示するコンポーネントはフレーム内に配置します。タイトル付きの薄い色の帯で、内側の枠線付きカードを囲みます。各コンポーネントのファイルにある例を参照してください。
• スクリーンリーダーに必要な情報をラベル付けしてください。 コンポーネントは label を受け取り、値が表示される場合は valueText も受け取ります。必ず渡してください。デフォルト値は一般的な内容です。