Solid Glass

项目简介

Solid Glass 是面向 AI 应用的设计系统，围绕玻璃质感的材质风格构建，强调实体感而非透明度，通过细腻高光、细边框、柔和阴影、厚度以及克制的色彩和动效，让界面保持平静、清晰且易读，同时保留触感与技术感。它建立在 shadcn/ui 与 Base UI 之上，支持浅色和深色模式。

核心功能

• 其玻璃质感主题集中在一个样式表中，涵盖颜色、三种玻璃厚度、一种状态与动效；基于 shadcn/ui 与 Base UI 构建，设计上无需改动现有 shadcn/ui 组件即可配合使用；包含面向 AI 应用界面的组件，如 status-glyph、composer、tool-steps、diff-view、ask-card、context-ring、task-notice 和 reasoning；提供由这些组件组成的区块，包括 agent workspace 整屏界面；提供 Create

适用场景

• 构建包含流式响应、代理任务与人工决策的 AI 应用界面；为现有 shadcn/ui 项目赋予触感化玻璃美学；借助提供的区块原型化 agent workspace 等整屏 AI 产品布局；通过调整厚度、色调、图表颜色、字体、圆角、边缘和模糊来创建材质变体。

快速开始

• 在基于 React 19、Tailwind CSS 4 与 Base UI 组件的 shadcn/ui 项目中，先运行 npx shadcn@latest init；再用 npx shadcn@latest add deeplethe/solid-glass/solid-glass 添加样式表；在 Tailwind 与 shadcn 的样式表之后导入，并删除 shadcn init 写入的 :root 和 .dark 颜色变量，因为 Solid Glass 定义了相同名称；Solid Glass 自有组件也通过同一方式安装，例如 npx

部署与要求

• 需要基于 React 19、Tailwind CSS 4 与 Base UI 组件的 shadcn/ui 项目；样式表必须在 Tailwind 和 shadcn 样式表之后导入，并移除 shadcn init 写入的 :root 与 .dark 颜色变量；Solid Glass 自有组件通过 shadcn CLI 注册表安装。

采用前须知

• 许可证：MIT。在使用、修改或分发项目前，请确认其具体条款。