solid-glass - 介于扁平与液态玻璃之间的 shadcn/ui 玻璃质感主题

solid-glass 是一套玻璃质感的界面主题，由维护者 deeplethe 以单份样式表的形式发布。按项目自述，它的目标是在扁平设计与液态玻璃之间取一个中间位置：扁平设计是不透明的色块，几乎谈不上表面处理；液态玻璃近乎全透明，在文字密集的页面上读者总要和背景抢字。solid-glass 只让轮廓透出来——足以让人知道这是玻璃，又不至于妨碍阅读。它面向的是使用 shadcn/ui 构建界面的开发者，尤其是那些围绕不断变化的信息来组织页面的 AI 应用：回复在流式输出、代理在执行任务、决策在等待人工输入，界面需要保持安静和可读。

维护者与状态

项目仓库为 deeplethe/solid-glass，维护者是 deeplethe，许可证为 MIT。仓库创建于 2026-10-12，最后一次提交在 2026-10-13。截至 2026-10-13，项目尚无正式 release，星标数为 238。项目另有一个官网，地址见下文「使用入口」。

主要能力

以下内容来自项目自述，属于维护者对自身设计的说明，不是第三方评测结论。

据项目说明，solid-glass 的风格建立在四个关键词上：

• 触感：界面应当是可触摸的，每一次交互都带有细微的触碰与回应感。
• 精确：干净的几何形状、克制的细节与收敛的光照，构成一种精确、技术化的观感。
• 物理感：深度来自厚度、阴影与空间层级，让每个元素都有实体存在感。
• 材质：细微的边缘高光、纤细的边框与柔和的阴影，共同定义每个表面的性格。

项目自述解释了这样设计的原因：AI 应用围绕不断变化的信息构建，solid-glass 让界面保持平静、易读——中性表面减少视觉干扰，深度建立层级，颜色与动效只留给有意义的反馈。整套系统用轻量 CSS 写成，可与现有的 shadcn/ui 组件配合，并同时支持浅色与深色模式。据项目说明，深色是这套材质原本的设计形态，浅色也同样提供。

组件方面，项目自述提供了一组面向代理式界面的部件，包括：status-glyph（三个光点，表示一轮对话正在进行以及它在做什么）、panel、tag、dot-loader（最薄的面板、小标签、一排等待中的圆点），以及 turn-status、composer、tool-steps、diff-view、ask-card、context-ring、task-notice、reasoning——分别对应代理的状态行、向它输入的输入框、它走过的步骤、差异视图、它提出的问题、上下文占用程度、任务通知以及它的思考过程。

仓库中还包含一个 Create 页面，据项目说明可以把材质的「旋钮」调出来：厚度、色调、图表颜色、字体、圆角、边缘、模糊，预览会随每次选择实时更新，并给出对应的几行 CSS。另有 Blocks 页面，展示由这些组件拼成的整屏界面。

使用入口

仓库地址：https://github.com/deeplethe/solid-glass；官网：https://deeplethe.github.io/solid-glass。

据项目说明，solid-glass 是一份样式表，它通过 data-slot 以及组件本身已有的类名来定位 shadcn/ui 组件的各个部分，因此已有的组件无需改动。使用前提是从一个 shadcn/ui 项目出发（React 19、Tailwind CSS 4、Base UI 组件）。初始化命令为：

npx shadcn@latest init

随后从站点或直接从仓库添加样式表：

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

项目自述要求在 Tailwind 与 shadcn 的样式表之后导入它，并删除 shadcn init 写入的 :root 与 .dark 颜色变量，因为 solid-glass 定义了同名的变量：

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

solid-glass 自己的组件也以同样方式安装，例如：

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

若要在本地运行站点本身，项目自述给出的命令是 npm install、npm run dev（默认地址为 http://localhost:5191）、npm run build（输出到 dist/）以及 npm run typecheck。

许可与限制

许可证为 MIT。项目自述补充说明：来自 shadcn/ui 的组件、示例与组件文档版权归其作者所有，同样采用 MIT 许可证，详见仓库中的 NOTICE.md。

关于适用边界，项目自述提到几点：它建立在 shadcn/ui 之上，因此需要先有一个 shadcn/ui 项目，并涉及 React 19、Tailwind CSS 4 与 Base UI 组件；样式表通过 data-slot 和已有类名定位组件，所以对组件本身不做改动，但仓库中少数 shadcn/ui 组件（如 button、input、tabs、dialog、dropdown-menu、sheet、sidebar 及部分表单控件）与上游原版存在细微差异，项目自述称样式表并不依赖这些差异。此外，项目自述说明贡献流程是：改动以拉取请求形式进入 dev 分支，维护者把 dev 合并进 main 后，才会到达已发布的站点与注册表。需要留意的是，截至 2026-10-13，该项目尚无正式 release，仓库创建与最后提交都集中在 2026-10-12 至 2026-10-13 这两天，属于非常新的项目。