メインコンテンツへ移動
AIチュートリアル

Solid Glass shadcn/uiテーマで産業AIインターフェースを構築する

Solid Glassのインストール方法、単一のスタイルシートをshadcn/uiプロジェクトに適用する方法、エージェント向けコンポーネントの使い方、ショーケースサイトをローカルで実行する方法、マテリアルの調整方法、そしてビジュアルルールに沿った新しいコンポーネントの作成方法を学びます。

約11分で読了
Solid Glass shadcn/uiテーマで産業AIインターフェースを構築する

Solid Glassの概要

Solid Glassは、産業用AIパネル、オペレーターコンソール、ダッシュボード向けに設計されたshadcn/uiのビジュアルテーマです。厚みのあるスモーキーなパネルをインターフェースに与え、遠目にはソリッドに見え、ガラスらしさは主にエッジに現れます。

リキッドガラスのエフェクトとは異なり、Solid Glassは背景によってテキストが見づらくなることを防ぎます。パネル面にはニュートラルなグレーのサーフェスを使用し、背後のコンテンツによって曲がったり、流動したり、色が変わったりしません。上端の明るいライン、細いボーダー、サーフェス下のシャドウによって仕上げられています。

ダークテーマのコンポーネント

このプロジェクトにはshadcn/uiのコンポーネントセットと、AIエージェントが作業するインターフェース向けのコンポーネント集が含まれています。公式のSolid Glassサイトでは、利用可能なコンポーネント全体でマテリアルを確認でき、ビジュアル変数を調整できるCreateページも利用できます。

1つのパネルを3通りで表示：フラット、Solid Glass、リキッドガラス

主な機能とコンポーネント

  • 単一のスタイルシートで、既存のdata-slot属性とクラスを使用してshadcn/uiコンポーネントにテーマを適用します。
  • テーマでは、3種類のガラスの厚み、カラー、モーション、単一のビジュアル状態など、shadcn/uiの変数名を定義します。
  • ダークモードを基本のマテリアルデザインとし、ライトテーマも利用できます。
  • Createページでは、厚み、色合い、チャートカラー、タイプ、角丸、リム、ぼかしを調整し、生成されたCSSをコピーできます。
  • レジストリからshadcn CLIを通じて、インストール可能なSolid Glassコンポーネントを利用できます。

Solid Glass独自のコンポーネントには、status-glyph、panel、tag、dot-loaderがあります。エージェント向けのコンポーネントには、turn-status、composer、tool-steps、diff-view、ask-card、context-ring、task-notice、reasoningがあります。

テーマをインストールする

1. shadcn/uiプロジェクトから始める

React 19、Tailwind CSS 4、Base UIコンポーネントをベースにしたshadcn/uiプロジェクトを使用します。新規に始める場合は、次のコマンドで初期化します。

npx shadcn@latest init

ダークテーマのコンポーネント

2. Solid Glassのスタイルシートを追加する

ホストされたレジストリまたはリポジトリから、スタイルシートをインストールできます。

npx shadcn@latest add https://deeplethe.github.io/solid-glass/r/solid-glass.json
npx shadcn@latest add deeplethe/solid-glass/solid-glass

3.既存のスタイルの後にインポートする

Tailwindとshadcn/uiのスタイルシートの後にSolid Glassをインポートします。このテーマはshadcn initで作成されるものと同じ色の変数名を定義するため、インポートを追加する前に生成された:rootおよび.darkの色変数ブロックを削除してください。

@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";
@import "./solid-glass.css";

このインポートの後は、既存のshadcn/uiコンポーネントを変更せずにマテリアルを使用できます。完全なインストール手順については、Solid Glassのインストールページを参照してください。

ライトテーマのコンポーネント

Solid Glassコンポーネントをインストールする

Solid Glass独自のコンポーネントも、同じshadcnレジストリのワークフローを使用します。たとえば、ステータスインジケーターは次のようにインストールします。

npx shadcn@latest add https://deeplethe.github.io/solid-glass/r/status-glyph.json

別のコンポーネントを追加する場合は、そのコンポーネントのレジストリURLを使ってコマンドを繰り返します。利用可能なレジストリエントリには、ステータス表示、パネル、ラベル、ローディングインジケーター、エージェントのターン情報、入力エリア、ツールステップ、差分、質問、コンテキスト使用量、タスク通知、推論ビューが含まれます。

ライトテーマのコンポーネント

プロジェクトをローカルで実行する

Solid Glassのショーケースを編集したり、ソースを確認したりするには、リポジトリをクローンし、依存関係をインストールして、開発サーバーを起動します。

npm install
npm run dev

開発サイトはhttp://localhost:5191で実行されます。本番用および検証用のコマンドは次のとおりです。

npm run build
npm run typecheck

ビルドによる本番出力はdist/に書き込まれます。

開発ツールを確認する

リポジトリには、テーマやサンプルを確認するための開発専用ルートが含まれています。

  • /dev/bannerは、プロジェクトで使用される開発バナーを表示します。
  • /dev/examplesはすべてのサンプルをマウントし、失敗したサンプルを報告します。
  • /dev/examples?q=button,cardは表示するサンプルを絞り込みます。
  • /dev/examples?theme=lightはライトテーマでサンプルをプレビューします。
  • /dev/examples?hover=<selector>は、ポインターがその要素上にある状態として一致する要素を表示します。
  • /dev/examples?click=<selector>は一致する要素を押し、開く内容を確認できるようにします。

リポジトリのデフォルトのGitHub Pagesの場所とは異なる場所にサイトをデプロイする場合は、サイトが配信されるアドレスをSOLID_GLASS_ORIGINに、そのパスをSOLID_GLASS_BASEに設定します。Solid Glassコンポーネントは、相互参照の際にoriginを使用します。

プロジェクト構成を理解する

1つのパネル、3つの表現：フラット、Solid Glass、リキッドガラス

重要なファイルとディレクトリは次のとおりです。

  • src/solid-glass.css には、マテリアルテーマ全体が含まれています。
  • registry.json には、shadcn CLI がインストールする内容が記述されています。レジストリのビルドでは、サイト用の public/r/ も生成されます。
  • src/components/ui/ には、表示に使用する shadcn/ui コンポーネントと Solid Glass コンポーネントが含まれています。
  • src/create/ と src/pages/create.tsx では、マテリアルのカスタマイズページを実装しています。
  • src/examples/ には、各例に対応する小さなファイルが1つずつ含まれています。
  • content/ には、コンポーネントとプロジェクトのドキュメントが保存されています。
  • scripts/build-docs.mjs は、ドキュメントを src/docs/generated.json に変換します。

Solid Glass コンポーネントを作成する

独自のコンポーネントを追加するには、プロジェクトで採用されている次の構成に従ってください。

  1. src/components/ui/<name>.tsx を作成します。shadcn/ui コンポーネントと同じ形式で記述し、関数コンポーネントを使い、各パーツに data-slot を追加し、@/lib/utils の cn() を使用します。
  2. src/examples/<name>-demo.tsx を追加し、追加する例ごとにファイルを1つずつ用意します。
  3. content/solid/<name>.mdx を作成します。タイトルと説明を含むフロントマター、コンポーネントのプレビュー、インストール手順、使用方法、各例の見出しを記述してください。

マテリアルは、4つのデザインルールに沿って統一してください。仕上げはエッジに施すこと、サーフェスは軽やかではなく重厚に感じられること、奥行きは厚みで表現すること、そしてインターフェースは1つの状態を使用することです。

Create ページで高度にカスタマイズする

Create ページを開くと、マテリアルをインタラクティブに調整できます。プレビューを確認しながら、厚み、色合い、チャートの色、タイプ、角丸、リム、ぼかしを調整できます。結果がインターフェースに合ったら、生成された短い CSS をコピーし、プロジェクトのスタイルシート内の該当する変数に適用してください。

利用可能な選択肢は src/create/options.ts で定義され、プレビューカードでは shadcn/ui コンポーネントが使われています。そのため、このページはデザインツールとしてだけでなく、テーマ変数がマテリアルに与える影響を確認するリファレンスとしても役立ちます。

まとめ

Solid Glass は、既存の shadcn/ui アプリケーションに、重厚で読みやすいガラスの美学を手軽に加える方法です。通常のテーマファイルの後にスタイルシートを読み込み、必要に応じてレジストリからエージェント向けコンポーネントを追加し、ローカルの例や Create ページを使って仕上がりを調整してください。プロジェクトは MIT License のもとで公開されています。shadcn/ui に由来するコンポーネントとドキュメントは、NOTICE.md に記載されているとおり、それぞれの作者の MIT License に従います。