deeplethe/solid-glass

Maintainer? Show your league in your README

Card: your league's emblem, from Copper to Legendary

[![bestofgithub](https://bestofgithub.dev/badge/deeplethe/solid-glass.svg?style=card)](https://bestofgithub.dev/repo/deeplethe/solid-glass)

Flat: fits beside your other badges

[![bestofgithub](https://bestofgithub.dev/badge/deeplethe/solid-glass.svg)](https://bestofgithub.dev/repo/deeplethe/solid-glass)

Loading README…


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.

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 in, the steps it took, a diff, a question it asks, how full its context is, a notice from a task, and its thinking.

Path	What it is
`src/solid-glass.css`	The theme. The whole material in one file: colours, the three thicknesses of glass, the one state, motion. It defines shadcn/ui's own variable names.
`registry.json`	The registry: what `shadcn add` installs from. Written by `scripts/build-registry.mjs`, which also builds `public/r/` for the site.
`src/components/ui/`	The components the site shows. shadcn/ui's (Base UI, `base-nova`), installed with its command line, and Solid Glass's own. A few of shadcn/ui's (`button`, `input`, `tabs`, `dialog`, `dropdown-menu`, `sheet`, `sidebar` and some form controls) differ from stock in small ways; the stylesheet does not depend on those differences.
`src/create/`, `src/pages/create.tsx`	The Create page: the material with its dials out (thickness, tint, chart colour, type, radius, rim, blur), a preview that takes each choice as it is made, and the few lines of CSS that come of it. `options.ts` says what each choice does to the stylesheet's variables; the preview cards are shadcn/ui's.
`src/blocks/`, `src/pages/blocks.tsx`	Blocks: whole screens made of the components, shown on the Blocks page in a frame of their own (`/view/<name>`). The single files at the top of the folder are Solid Glass's own (`agent-workspace`) and are in its registry; the folders are shadcn/ui's blocks in the material, installed from shadcn/ui.
`src/examples/`	One small file per example, as on ui.shadcn.com: shadcn/ui's own examples, and Solid Glass's for its own components.
`content/`	The documentation. `components/` is shadcn/ui's page for each component; `solid/` and `docs/` are Solid Glass's.
`src/site/`, `src/pages/`, `src/home/`	The site: header, sidebar, component preview, and the wall of cards on the home page.
`.github/`	The checks every pull request must pass (`checks.yml`), the workflow that publishes `main` (`pages.yml`), and the templates for issues and pull requests.
`scripts/build-docs.mjs`	Turns `content/` into `src/docs/generated.json`, which the site renders.

deeplethe/solid-glass

Solid Glass

The style

Why it is built this way

Install

What is here

Run

Add a component of Solid Glass's own

Contributing

Licence