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

Description and use

Adding Solid Glass to a shadcn/ui project applies a glass‑like theme and ready‑made agent UI components without modifying existing components.

Problem

Integrating a glass‑like theme and agent UI components into an existing shadcn/ui React project without modifying existing components.

Outcome

The project now displays a calm glass‑like material design across all shadcn/ui components and includes ready‑made agent UI elements for status, chat, and tool steps.

Workflow

• Install Solid Glass via shadcn CLI: npx shadcn@latest add deeplethe/solid-glass/solid-glass
• Import stylesheets in order: Tailwind, tw‑animate‑css, shadcn/tailwind.css, then ./solid-glass.css
• Delete duplicate color variables from :root and .dark that were added by shadcn init
• Verify light and dark mode rendering
• Install agent components via shadcn CLI: npx shadcn@latest add deeplethe/solid-glass/status-glyph
• Tune theme variables using the Create page and append generated CSS after the import
• Preview components locally by cloning the Solid Glass repo and running npm run dev
• Integrate agent components into the app as needed

Evidence

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.

Source

Install it straight from the repo with the shadcn CLI: npx shadcn@latest add deeplethe/solid-glass/solid-glass

Source

Import it after Tailwind and shadcn's stylesheet: @import "tailwindcss"; @import "tw-animate-css"; @import "shadcn/tailwind.css"; @import "./solid-glass.css";

Source

Delete the duplicate colour variables. Solid Glass defines the same variable names, and leaving both in place means the old values can win.

Source