Solid Glass
A glass-inspired design system tailored for React-based AI application interfaces.
Tactile, physical, and technical UI components built on shadcn/ui and Tailwind CSS.
Solid Glass is a specialized design system and CSS theme created specifically for AI applications. It bridges the gap between flat design and overly transparent liquid glass, giving you readable text alongside subtle edge highlights and physical depth.
What it is
It delivers a single stylesheet defining colors, three thicknesses of glass, motion, and shadcn/ui variable names, alongside tailored UI components like status glyphs, diff views, and reasoning boxes. You can configure themes using its built-in Create page dials and deploy entire agent workspace blocks directly into your React project.
Who it's for
It suits frontend developers and designers building AI interfaces, chat UIs, or agent workspaces who want a calm, legible aesthetic. It does not suit teams looking for traditional corporate or purely flat web design styles.
Key features
Solid Glass Aesthetics
Provides a restrained finish emphasizing clarity and stability over heavy refraction.
Agent Workspace Components
Includes status glyphs, composer boxes, diff views, and reasoning displays out of the box.
shadcn/ui Integration
Works directly with existing shadcn/ui components by targeting data-slots via a single CSS file.
Interactive Create Page
Lets you adjust material dials like thickness, tint, blur, and radius to generate custom CSS variables.
Up and running in 3 steps
Our honest verdict
What's great
- One stylesheet integrates cleanly with existing shadcn/ui and Tailwind setups
- Tailored specifically for streaming AI responses and agent state feedback
- Includes pre-built agent workspace blocks for rapid prototyping
- Provides an interactive Create page to dial in custom material properties
Where it falls short
- Requires an existing React 19 and Tailwind CSS 4 environment to implement
- Overwrites default color variables, requiring manual cleanup of standard shadcn init templates
- Niche aesthetic style may not fit traditional non-AI application branding
Pricing & license
Free under its license, with no paid hosted options mentioned in the repository. The only cost is your own engineering time to integrate and style your application.
Open remote AI-training roles
873 open remote AI-training roles, updated November 15, 2026; most pay $20–$170 an hour. Zekai lists them free; the application goes to the employer’s platform.
Alternatives
These reviewed AI tools do the same job instantly — from our scored directory.
Use it, or have us set it up
FAQ
How does Solid Glass differ from liquid glass?
Liquid glass is nearly clear, forcing readers to fight the background for text visibility. Solid Glass limits transparency to an outline, ensuring high readability for dense text and streaming AI responses.
Do I need to modify my existing shadcn/ui components?
No. The stylesheet finds each part of your existing shadcn/ui components using data-slot attributes and existing classes without requiring component rewrites.
Can I customize the glass material properties?
Yes. The included Create page allows you to adjust thickness, tint, chart color, type, radius, rim, and blur to generate your own CSS variables.
