LucentGlassmorphic React components

A complete, beautiful component set that stays truly lightweight — with runtime-adjustable transparency for accessibility. Polish without weight.

Get Started

Components

Theming

◈

Runtime transparency

Dial glass opacity and blur at runtime through a single CSS variable — no React re-render. The accessibility knob is a first-class token.

⚡

Truly lightweight

Per-component tree-shakeable ESM, zero style runtime, no bundled icons or fonts. You only pay for what you import.

♿

Accessible by default

Radix-powered behavior, WCAG contrast floor, solid/high-contrast mode, prefers-reduced-motion, and full RTL via CSS logical properties.

▲

SSR & Next.js safe

Preserved "use client" boundaries and a client-only docs island prove Server Component safety end-to-end.

📦 Also available as vitreui on npm — same library, shorter name.npm i vitreui · npm i @orionshub/lucent

Every component page ships a live example you can reshape with the floating glass-controls panel — switch theme, accent, density, drag the opacity/blur, flip RTL, or toggle solid mode — plus an auto-generated prop table and notes on CSS import, portal theming, transparency, reduced motion, RTL, and SSR.