AI interfaces are full of things that move: responses streaming in, agents running tools, questions waiting for a human. Solid Glass is a design system built for that: one stylesheet that gives your existing shadcn/ui components a calm, glass-like material, plus a set of agent-specific components for status lines, tool steps, diffs and questions.
The best part: it finds each part of a shadcn/ui component by the data-slot and classes it already carries, so the components you have need no changes. Here is how to add it in about 30 minutes.
What you need
A shadcn/ui project on React 19, Tailwind CSS 4 and the Base UI components. If you are starting fresh:
npx shadcn@latest init
Step 1: Add the stylesheet
Install it straight from the repo with the shadcn CLI:
npx shadcn@latest add deeplethe/solid-glass/solid-glass
Step 2: Import it in the right order
Import it after Tailwind and shadcn's stylesheet:
@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";
@import "./solid-glass.css";
Step 3: Delete the duplicate colour variables
shadcn init wrote :root and .dark colour variables into your CSS. Delete them. Solid Glass defines the same variable names, and leaving both in place means the old values can win.
Step 4: Check light and dark mode
Dark is the material as designed. Light is supported too. Click through your app in both before you ship.
Step 5: Add the agent components
This is where Solid Glass goes beyond a theme. Its own components install the same way:
npx shadcn@latest add deeplethe/solid-glass/status-glyph
What is available, per the README:
| Component | Use it for |
|---|---|
status-glyph |
Three points of light that show a turn is running and what it is doing |
turn-status |
The agent's status line |
composer |
The box the user writes to the agent in |
tool-steps |
The steps the agent took |
diff-view |
A diff |
ask-card |
A question the agent asks the user |
context-ring |
How full the agent's context is |
task-notice, reasoning
|
A notice from a background task, and the agent's thinking |
panel, tag, dot-loader
|
A thin pane, a small label, and a waiting row of dots |
Step 6: Tune it to your brand
Open the Create page, turn the dials (thickness, tint, chart colour, type, radius, rim, blur), and copy the few lines of CSS it produces. Paste them below the @import "./solid-glass.css"; line. These are theme variables, so they apply app-wide: recheck your existing components afterwards.
Preview everything locally first
If you want to see the components and full-screen blocks before adopting:
git clone https://github.com/deeplethe/solid-glass.git
cd solid-glass
npm install
npm run dev # http://localhost:5191
Open the Blocks page for whole screens (including an agent workspace) and the Create page for the dials. In development, /dev/examples?theme=light mounts every example in light mode.
Use cases with copy-paste agent prompts
- Apply the Solid Glass look to a shadcn/ui project
- Add agent status and chat components to an AI app
- Run the Solid Glass site to preview components and blocks
- Tune the glass thickness, tint and radius with the Create page
Solid Glass is MIT licensed.
Get one email every Monday with the week's hottest AI repos and exactly how to use them: subscribe free at dedupedai.com
Top comments (1)
The shared variable names make Step 3 the risky part: removing shadcn’s
:rootand.darkvalues changes every component before the new theme is tuned. Did you compare the existing app-specific tokens and migrate the ones you still need before deleting those blocks?