Build interfaces withpremium glass surfaces.
Glin UI ships 76+ production components with 7 surface variants, 5 glass elevation levels, and full dark mode — all built on Radix primitives and Tailwind CSS.
Components
76+
Surface Variants
7
Elevation Levels
5
Surface Variants
Composable
76+
Components
7
Surface Variants
5
Elevation Levels
80+
Tests Passing
Built With
Modern stack, zero compromise
What Ships
76+ components, every variant production-ready.
Every component ships with glass, liquid, matte, and glow surface variants alongside semantic color variants — all with full dark mode, keyboard navigation, and reduced-motion support.
Badge
Docs →Surface + semantic variants with auto-colored icons.
Alert
Docs →Glass surfaces + semantic feedback with auto-icons.
Glass Surface
Deployment ready
Data Display
Docs →Progress, chips, tabs, and separators.
Developer Experience
Install. Import. Ship.
Same ergonomics as shadcn/ui but with a complete glass design system included. Every component is type-safe, tree-shakeable, and works with your existing Tailwind setup.
- Copy-paste Tailwind classes for every variant
- Type-safe props with full IntelliSense
- Tree-shakeable — only ship what you use
- Zero runtime CSS-in-JS — Tailwind only
Install
$ pnpm add @glinui/ui @glinui/tokensUsage
import { Button, Badge, Avatar } from "@glinui/ui"
export function Hero() {
return (
<Button variant="glass">Get Started</Button>
)
}Why Glin UI
Not just components. A design system.
Not another Tailwind wrapper
Purpose-built glass design system with 5 elevation levels, SVG refraction physics, and tokenized surfaces — not just utility class aliases.
Production-first
Built on Radix primitives with WCAG AA contrast, full keyboard navigation, reduced-motion fallbacks, and 80+ test gates.
One visual language
Same component API and design tokens from marketing pages to product dashboards. No visual drift between teams.
Built To Convert
A complete marketing surface, not a stack of random blocks.
Every section carries the same visual DNA: controlled depth, polished transitions, and copy hierarchy that guides people to action.
- Intentional visual rhythm from hero to CTA
- Neutral dark mode states without neon hover noise
- Motion that adds clarity, not distraction
Liquid Glass Surfaces
Refraction-aware elevation, adaptive luminance, and production-ready frosted layers with SVG displacement mapping.
Motion With Guardrails
Preset springs, stagger choreography, and reduced-motion fallbacks baked into every component.
A11y + DX Baseline
Keyboard-first patterns, WCAG AA contrast, focus treatment, and 80+ test gates from day one.
Docs + Component Sync
Your docs, snippets, and primitives stay aligned across every release with registry-driven metadata.
Design Tokens
5 elevation levels. Tokenized everything.
Every glass surface is tokenized — blur radius, surface opacity, shadow depth, and refraction intensity scale together across 5 elevation levels via CSS custom properties.
1
Level 1
2
Level 2
3
Level 3
4
Level 4
5
Level 5
Glass Surface
--glass-{1-5}-surface5 opacity levels from subtle to opaque
Glass Shadow
--glass-{1-5}-shadowDepth-matched shadow at each elevation
Refraction
--glass-refraction-topTop-edge light refraction highlight
Pipeline
From setup to ship, with one visual language.
Install + Theme
Boot with tokens and glass physics in minutes, not days. One package for the full design system.
Compose Interfaces
Assemble hero, feature grids, and CTAs using the same design language as your product UI.
Ship With Confidence
Publish with responsive behavior, reduced-motion support, and type-safe props throughout.
Packages
Four packages, one design system.
@glinui/ui
UI76 shipped components across primitive and signature layers.
@glinui/tokens
TOLiquid glass color, shadow, blur, and refraction design tokens as CSS custom properties.
@glinui/motion
MOReusable springs, stagger presets, and reduced-motion fallbacks for every component.
@glinui/registry
RERegistry metadata layer powering the CLI install and docs integration pipeline.
Surface System
7 variants. One API. Every component.
Switch between surface styles with a single prop. Every variant is designed to work in both light and dark mode with consistent visual quality.
default
Badgeglass
Badgeliquid
Badgematte
Badgeglow
Badgeoutline
Badgeghost
BadgeSemantic Variants
Success, warning, destructive, info — auto-colored with matching icons.
Dark Mode
Every variant ships with carefully tuned dark mode surfaces and shadows.
Reduced Motion
All animations respect prefers-reduced-motion. No exceptions.
Keyboard Accessible
Built on Radix primitives with full keyboard navigation and focus management.
Component Catalog
39 primitives. 37 signature components.
From low-level atoms like buttons and inputs to high-level signature components like glass navbars and spotlight cards — every piece of the interface is covered.
Primitives
Signature Glass Components
How We Compare
Built different. On purpose.
| Feature | Glin UI | shadcn/ui | Others |
|---|---|---|---|
| Glass Design System | — | — | |
| Surface Variants (7) | — | Partial | |
| Radix Primitives | Varies | ||
| Tailwind CSS | Varies | ||
| SVG Refraction Physics | — | — | |
| 5 Elevation Levels | — | — | |
| Semantic Color Variants | — | Partial | |
| Dark Mode | |||
| Reduced Motion | Partial | Partial | |
| Tokenized Design System | Partial | Partial |
Free forever. MIT licensed.
Glin UI is fully open source under the MIT license. Use it in personal projects, startups, and enterprise products — no strings attached. Contributions welcome.
MIT
License
76+
Components
80+
Tests
v2
Token System
FAQ
Common questions
Ready To Ship
Give your product the visual standard it deserves.
Start with setup, pick your components, and ship production-grade interfaces with built-in glass surfaces, motion, and accessibility defaults.