跳到主要内容
AI教程

使用 Solid Glass shadcn/ui 主题构建工业级 AI 界面

了解如何安装 Solid Glass，将其单一样式表应用到 shadcn/ui 项目中，使用面向智能体的组件，在本地运行展示站点，调整材质，并创建遵循其视觉规则的新组件。

AI我搜编辑部阅读约 8 分钟
使用 Solid Glass shadcn/ui 主题构建工业级 AI 界面

Solid Glass 的作用

Solid Glass 是一款面向工业 AI 面板、操作员控制台和仪表盘的 shadcn/ui 视觉主题。它为界面提供厚重、烟熏质感的面板，从远处看起来坚实，主要在边缘展现玻璃特性。

与液态玻璃效果不同，Solid Glass 不会让背景与文字争夺注意力。其表面采用中性灰色，不会弯曲、流动，也不会吸收背后内容的颜色。最终质感来自顶部的浅色线条、细边框和表面下方的阴影。

深色主题中的组件

该项目包含 shadcn/ui 组件集，以及一组适用于 AI 代理执行任务时所用界面的组件。官方 Solid Glass 网站 展示了这种材质在各个可用组件中的效果，并提供了一个可调整视觉变量的 Create 页面。

同一面板的三种方式：扁平、Solid Glass、液态玻璃

主要特性和组件

  • 单个样式表通过 shadcn/ui 组件现有的 data-slot 属性和类名应用主题。
  • 主题定义了 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。

了解项目结构

一个面板，三种方式：扁平、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/ 为每个示例分别保存一个小型文件。
  • 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，并为每个额外示例分别添加一个文件。
  3. 创建 content/solid/<name>.mdx。包含带有标题和描述的 front matter、组件预览、安装说明、使用说明，以及每个示例对应的标题。

确保材质符合四项设计规则：边缘决定饰面，表面应给人厚重而非轻盈的感觉，深度通过厚度来表达，界面采用单一状态。

使用 Create 页面进行高级自定义

打开创建页面，以交互方式调整材质。调整厚度、色调、图表颜色、类型、圆角、边缘和模糊效果，同时预览会实时更新。结果符合界面需求后，复制生成的少量 CSS，并在项目样式表中调整相关变量。

可用选项定义在 src/create/options.ts 中，预览卡片使用 shadcn/ui 组件。因此，该页面既可作为设计工具，也可用于了解主题变量如何影响材质。

结语

Solid Glass 为现有的 shadcn/ui 应用提供了一种低门槛的方式，使其拥有厚重、易读的玻璃质感。将其样式表置于常规主题文件之后，在需要时从注册表添加面向智能代理的组件，并使用本地示例或 Create 页面进一步完善效果。项目采用 MIT License 发布；源自 shadcn/ui 的组件和文档仍遵循其作者的 MIT License，详见 NOTICE.md。