Repolode
Submit
deeplethe

deeplethe/solid-glass

A design system for AI applications: a shadcn/ui-compatible stylesheet and components with a solid, glass-inspired finish.

View on GitHubWebsite
Stars
2,042
Forks
42
Open issues
5
Last commit
7 days ago

What is it?

Solid Glass is a design system for AI applications, built on shadcn/ui, Tailwind CSS 4 and React 19. It is delivered as a single stylesheet that restyles existing shadcn/ui components by their data-slot attributes and class names, so components already in a project need no changes.

The visual style sits between flat design and liquid glass: surfaces get fine edge highlights, thin borders and soft shadows, so they read as solid material rather than transparent panes. The goal is a calm interface where text stays readable while streaming responses, running agents and pending decisions are on screen.

Beyond the base style, the project adds its own components for agent interfaces, including a status indicator, a composer, tool step lists, a diff view, a question card, a context usage ring, task notices and a reasoning block. It also ships a Create page for adjusting theme variables and a set of example screens, installable through the shadcn CLI.

Key features

  • 01Single stylesheet that restyles existing shadcn/ui components without code changes.
  • 02Supports light and dark modes, with dark as the primary design.
  • 03Adjustable theme variables such as thickness, tint, radius and blur on the Create page.
  • 04Agent-oriented components like turn status, tool steps, diff view and ask card.
  • 05Installable via the shadcn CLI from the repository registry.

Use cases

  • Building a chat or agent interface on top of an existing shadcn/ui project.
  • Showing streaming LLM output, tool calls and pending human input in a readable layout.
  • Creating a consistent visual theme for an AI product without writing custom CSS from scratch.

In collections

Open-source AI agent frameworks & apps

Topics

#design-system#react#tailwindcss#shadcn-ui#ai-agents#chat-ui#theme#agent-ui#ai#llm

FAQ

What is solid-glass?
A design system for AI applications: a shadcn/ui-compatible stylesheet and components with a solid, glass-inspired finish. Solid Glass is a design system for AI applications, built on shadcn/ui, Tailwind CSS 4 and React 19. It is delivered as a single stylesheet that restyles existing shadcn/ui components by their data-slot attributes and class names, so components already in a project need no changes.
Is solid-glass free to use? What license does it have?
solid-glass is open source under the MIT license. Check the license terms before using it in commercial products.
Is solid-glass still maintained?
Actively maintained. The last commit to solid-glass was on Oct 31, 2026.
What can I use solid-glass for?
Building a chat or agent interface on top of an existing shadcn/ui project. Showing streaming LLM output, tool calls and pending human input in a readable layout. Creating a consistent visual theme for an AI product without writing custom CSS from scratch.
Where can I get solid-glass?
The source code and installation instructions are on GitHub: https://github.com/deeplethe/solid-glass

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects