Solid Glass

Overview

Solid Glass is a design system for AI applications built around a glass-inspired material style. It emphasizes solidity over transparency, using delicate highlights, fine borders, soft shadows, thickness, and restrained color and motion to keep interfaces calm and readable while retaining a tactile, technical feel. It is built on shadcn/ui and Base UI and works in light and dark modes.

Key Features

• A glass-inspired theme defined in one stylesheet, with colors, three glass thicknesses, one state, and motion.
• Built on shadcn/ui and Base UI, and designed to work with existing shadcn/ui components without component changes.
• Includes components for AI application interfaces such as status glyph, composer, tool steps, diff view, ask card, context ring, task notice, and reasoning.
• Provides blocks, whole screens made from the components, including an agent workspace.
• Includes a Create page for adjusting thickness, tint, chart color, type, radius, rim, and blur.
• Supports light and dark modes, with dark described as the material as designed.

Use Cases

• Building AI application interfaces with streaming responses, agent tasks, and human decisions.
• Styling existing shadcn/ui projects with a tactile glass aesthetic.
• Prototyping agent workspaces and other whole-screen AI product layouts from provided blocks.
• Creating variants of the material by tuning thickness, tint, chart color, type, radius, rim, and blur.

Getting Started

• Start from a shadcn/ui project using React 19, Tailwind CSS 4, and Base UI components; initialize with npx shadcn@latest init.
• Add the Solid Glass stylesheet with npx shadcn@latest add deeplethe/solid-glass/solid-glass.
• Import it after Tailwind and shadcn's stylesheet, and delete the :root and .dark color variables written by shadcn init because Solid Glass defines the same names.
• Install Solid Glass components the same way, for example npx shadcn@latest add deeplethe/solid-glass/status-glyph.

Deployment & Requirements

• Requires a shadcn/ui project with React 19, Tailwind CSS 4, and Base UI components.
• The stylesheet must be imported after Tailwind and shadcn's stylesheet, with shadcn init's :root and .dark color variables removed.
• Solid Glass's own components are installed through the shadcn CLI registry.

Before You Adopt

• License: MIT. Review its terms before using, modifying, or distributing the project.
• Adoption requires an existing shadcn/ui project based on React 19, Tailwind CSS 4, and Base UI components.