deeplethe / solid-glass

# Solid Glass
The style · Install · What is here · Contributing
A refined glass-inspired aesthetic that feels solid from afar and reveals its subtle materiality up
close. Delicate highlights, fine borders, and soft shadows create depth, while a restrained finish
emphasizes clarity, stability, and a sense of solidity over transparency, refraction, and fluidity.
That is one of the blocks: whole screens made of the
components, to look at, read and copy in. Below, the components themselves.
It stands between flat design and liquid glass. Flat is an opaque block with no finish to speak of;
liquid glass is nearly clear, and on a page with a lot of text the reader is always fighting the
background for the words. Solid Glass lets only an outline through: enough to know it is glass, not
enough to get in the way of reading.
## The style
| | |
|---|---|
| **Tactility** | Interfaces that feel tangible. Every interaction carries a subtle sense of touch and response. |
| **Precision** | Clean geometry, refined details, and restrained lighting create a precise, technical aesthetic. |
| **Physicality** | Depth comes from thickness, shadow, and spatial hierarchy, giving every element a sense of physical presence. |
| **Materiality** | Subtle edge highlights, fine borders, and soft shadows define the character of each surface. |
### Why it is built this way
AI applications are built around information that is constantly changing — responses streaming in,
agents performing tasks, and decisions waiting for human input.
Solid Glass keeps the interface calm and readable. Neutral surfaces reduce visual distractions,
depth establishes hierarchy, and color and motion are reserved for meaningful feedback.
The entire system is built with lightweight CSS and works with existing shadcn/ui components in both
light and dark modes.
The Material page shows how a pane is made,
and the Create page lets you turn the dials.
## Install
Solid Glass is one stylesheet. It finds each part of a shadcn/ui component by the `data-slot` and
the classes it already carries, so the components you have need no changes.
Start from a shadcn/ui project (React 19, Tailwind CSS 4, the Base UI components):
 [code] 
Add the stylesheet, straight from this repository:
 [code] 
Import it after Tailwind and shadcn's stylesheet, and delete the `:root` and `.dark` colour
variables that `shadcn init` wrote (Solid Glass defines the same names):
 [code] 
Dark is the material as designed; light is there too. The
installation page has the rest.
Solid Glass's own components install the same way:
 [code] 
| Component | What it is |
|---|---|
| `status-glyph` | Three points of light that say a turn is going, and what it is doing. |
| `panel`, `tag`, `dot-loader` | The thinnest pane, a small label, and a row of dots that waits. |
| `turn-status`, `composer`, `tool-steps`, `diff-view`, `ask-card`, `context-ring`, `task-notice`, `reasoning` | For interfaces where an agent works: its status line, the box you write to it