Repolode
deeplethe

deeplethe/solid-glass

面向 AI 应用的设计系统,基于 shadcn/ui 的样式表与组件,带有类玻璃的质感。

Star
2,042
Fork
42
未关闭 Issue
5
最近提交
7天前

这是什么?

Solid Glass 是一套面向 AI 应用的设计系统,基于 shadcn/ui、Tailwind CSS 4 和 React 19 构建。它以一个样式表的形式提供,通过 data-slot 和已有的类名为 shadcn/ui 组件换上新外观,项目中已有的组件无需修改。

视觉风格介于扁平设计与液态玻璃之间:表面带有细微的边缘高光、细边框和柔和阴影,呈现为实体材质而非透明面板。目标是让界面保持平静易读,即使在回答流式输出、智能体运行和等待用户决策时,文字依然清晰。

除基础样式外,项目还提供面向智能体界面的组件,包括状态指示、输入框、工具步骤列表、diff 视图、提问卡片、上下文用量环、任务通知和推理内容展示等。此外还有用于调整主题变量的 Create 页面和若干示例界面,可通过 shadcn CLI 安装。

核心功能

  • 01单个样式表即可为现有 shadcn/ui 组件换肤,无需修改组件代码。
  • 02同时支持浅色与深色模式,深色为主要设计方案。
  • 03Create 页面可调整厚度、色调、圆角、模糊等主题变量。
  • 04提供面向智能体的组件,如回合状态、工具步骤、diff 视图和提问卡片。
  • 05可通过 shadcn CLI 从仓库注册表直接安装。

适用场景

  • 在现有 shadcn/ui 项目上搭建聊天或智能体交互界面。
  • 以易读的布局展示流式 LLM 输出、工具调用和等待人工输入的状态。
  • 无需从零编写 CSS,即可为 AI 产品建立统一的视觉主题。

收录于专题

标签

常见问题

solid-glass 是什么?
面向 AI 应用的设计系统,基于 shadcn/ui 的样式表与组件,带有类玻璃的质感。 Solid Glass 是一套面向 AI 应用的设计系统,基于 shadcn/ui、Tailwind CSS 4 和 React 19 构建。它以一个样式表的形式提供,通过 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

概要由 AI 根据项目 README 生成;GitHub 数据每日更新。

相关项目