deeplethe/solid-glass

Media & Design

A shadcn/ui design system with a glass material aimed at chat and agent interfaces.

2,197
35
TypeScript
MIT
12 days old

The problem

If you build an LLM chat product, you either ship the default shadcn/ui look that every other AI startup also ships, or you spend weeks making an original visual language. Streaming responses, agent status lines, tool calls and context meters have no common visual vocabulary, so each team improvises. Solid Glass offers one: a themed stylesheet plus React components that cover those recurring AI interface parts.

What's different

It is not a component library in the usual sense. Most of it is one CSS file that restyles the shadcn/ui components you already have, matching on data-slot and existing classes, so adoption does not mean swapping your components. It also commits to a specific aesthetic position between flat design and "liquid glass": opaque enough to stay readable behind text, with depth coming from edges and shadow rather than transparency. The component set is deliberately AI-shaped, with a status glyph, tool steps, a diff view, ask-card, context-ring and reasoning panels; typical design systems leave these building blocks to the app. There is a live Create page for tuning thickness, tint, radius, blur and type, which is a nicer way to explore a theme than reading variables.

Who it's for

Frontend developers building chat or agent UIs on React 19, Tailwind CSS 4 and shadcn/ui, who want a distinctive look without designing one. It suits people who like the glass direction; it does not help anyone who needs a neutral, brand-agnostic base. Teams not on shadcn/ui, or on older React or Tailwind versions, should look elsewhere, since the whole model depends on shadcn's markup and CSS variable names. Teams whose components differ heavily from stock shadcn should check the dependency before committing.

Cost of adoption

The README states the stack plainly: React 19, Tailwind CSS 4, Base UI shadcn components, and a stylesheet added through npx shadcn@latest add deeplethe/solid-glass/solid-glass. You also delete the :root and .dark colour variables shadcn init wrote, which means it takes over your theming rather than sitting beside it. That is a real lock-in risk: it is a visual decision, not a drop-in utility. The README is unusually detailed about the repository layout and contribution flow, but the project is days old, and its own components are described as a small registry (13 items), so expect churn.

Verdict

This is a brand-new project: created 12 days ago, yet already about 2.2k stars and gaining roughly 174 per day on the new TypeScript board. That is a spike, not a track record, and there is no Hacker News discussion to indicate sustained practitioner interest. The idea is credible and the implementation approach (restyle shadcn instead of replacing it) is cheap to try, but treat it as a design opinion to evaluate, not infrastructure to depend on. If you like the look, fork it and pin a commit; if you want something stable for a long-lived product, wait for signs of maintenance.

Written by AI from the project's README, updated October 25, 2026. The project's own docs are the source of truth.