deeplethe/solid-glass

これは何？

主な機能

• 01既存のshadcn/uiコンポーネントをコード変更なしでスタイル変更できる単一のスタイルシート。
• 02ライトモードとダークモードに対応し、ダークモードを基本のデザインとしています。
• 03Createページで、厚み、色味、角丸、ぼかしなどのテーマ変数を調整できます。
• 04ターンのステータス、ツールのステップ、diffビュー、質問カードなど、エージェント向けコンポーネントを用意しています。
• 05リポジトリのレジストリからshadcn CLIを使ってインストールできます。

ユースケース

• 既存のshadcn/uiプロジェクトをベースに、チャットやエージェントのインターフェースを構築する。
• ストリーミング中のLLM出力、ツール呼び出し、人間の入力待ちを読みやすいレイアウトで表示する。
• CSSを一から独自に書かずに、AI製品に統一感のあるビジュアルテーマを適用する。

収録されている特集

トピック

よくある質問

solid-glass とは？

AIアプリケーション向けのデザインシステム。shadcn/ui互換のスタイルシートとコンポーネントに、ソリッドでガラスを思わせる仕上がりを取り入れています。 Solid Glassは、shadcn/ui、Tailwind CSS 4、React 19をベースに構築された、AIアプリケーション向けのデザインシステムです。単一のスタイルシートとして提供され、data-slot属性とクラス名を使って既存のshadcn/uiコンポーネントのスタイルを変更するため、プロジェクト内のコンポーネントに手を加える必要はありません。

solid-glass は無料で使えますか？ライセンスは？

solid-glass は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

solid-glass は今もメンテナンスされていますか？

活発にメンテナンス中。solid-glass の最終コミットは 2026年10月31日 です。

solid-glass は何に使えますか？

既存のshadcn/uiプロジェクトをベースに、チャットやエージェントのインターフェースを構築する。 ストリーミング中のLLM出力、ツール呼び出し、人間の入力待ちを読みやすいレイアウトで表示する。 CSSを一から独自に書かずに、AI製品に統一感のあるビジュアルテーマを適用する。

solid-glass はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/deeplethe/solid-glass