How to add Solid Glass to a shadcn/ui app, plus ready-made AI agent components

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:

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