CSS-first by default
Inspectable, themeable materials with an intentional opaque fallback.
OPENGLASS UI / MATERIAL SYSTEM 01REACT 18+ · MIT
Glass is not a blur. It’s an interface system.
Build cinematic, accessible product interfaces with 40 React components, neutral adaptive themes, CSS-first glass materials, and opt-in refraction for controlled media.
Published on npm · MIT · zero runtime dependenciesServer render · clear material
Drag frost to thicken the material. Thickness 0.78 · dispersion 0.018 · motion pending40Accessible components
0Runtime dependencies
1Package to install
3Browser engines tested
18+React versions supported
MITLicensed, free forever
01 / System
Cinematic when it matters. Dependable everywhere.
The surface adapts. The contract does not. OpenGlass keeps spectacle at the edges and interaction semantics at the center.
Native DOM throughout
Real text, forms, focus, selection, and keyboard behavior.
Adaptive by design
Reduced motion, reduced transparency, forced colors, and capability policy.
40 complete components
From buttons and menus to dialogs, inputs, toasts, and navigation.
Theme it in seconds
Neutral defaults, six presets, semantic colors, and safe foregrounds.
Spectacle on demand
Opt-in owned-media refraction without burdening ordinary controls.
02 / Material anatomy
See what each optical layer is doing.
Each study isolates one job: protect text, reveal simulated thickness, or add restrained chromatic depth. The irregular outline makes those optics feel formed rather than synthetic.
01 / Frost · Legibility layer
Frost diffuses the source, not the content.
The color and detail behind the pane soften while labels rendered above it stay sharp and high-contrast.
USEMenus, dialogs & toasts02 / Thickness · Geometry input
Contours map simulated glass thickness.
Distance from the edge becomes a thickness field: the core bends more, while the perimeter catches light. The rings are a diagnostic, not decoration.
MAP Geometry → refraction strength03 / Spectral · Media accent
Dispersion belongs at the perimeter.
Coral and teal separate at the boundary while the center remains neutral and legible. Reserve it for imagery and motion—not text surfaces.
USEOwned image & video surfaces03 / In product
Not isolated effects. Working interface compositions.
Open the overlays, change the data, scrub the media, and move through the workflow. These are the same exported recipes consumers receive.
REFRACTION FIELD72%
Contours reveal the thickness field. Distortion turns that field into visible optical displacement.
04 / Component system
40 components. One predictable API.
Every primitive is interactive in the full catalog, built with semantic DOM, and governed by the same neutral token system.
Open the complete component catalogAdd a collaboratorreview
Every control above is the shipped component. Tab into it, type in it, and it behaves the same way in your app.
Creative studio
Command surfaces, media, and direct manipulation.
ButtonIconButtonSegmentedControlSwitchSliderToolbarDockMenuMenuItemPopoverTooltipMediaControlsToggleButton
Analytics console
Dense information with legible hierarchy.
TabsBadgeAvatarAvatarGroupCardStatProgressMeterBreadcrumbsPaginationSearchField
Material builder
Predictable authoring and form contracts.
StepperCheckboxRadioGroupSelectTextFieldTextareaNumberFieldFileDropzone
Feedback & overlays
State changes that remain clear and accessible.
SpinnerSkeletonAlertBannerAccordionDialogDrawerToast
05 / Setup
One stylesheet. One provider. Use the components you need.
One package, zero runtime dependencies, and React stays a peer so your app owns its version. Copy the command and you are three lines from a glass surface.
Install the public facade
React and React DOM remain peers, so your application owns their versions.
Set the adaptive boundary
Neutral light and dark tokens work immediately. Override colors when ready.
Compose native controls
Import only what the surface needs; enhanced media remains an opt-in subpath.
npm install open-glass-ui react react-domimport "open-glass-ui/styles.css";
import { Button, Glass, GlassSystemProvider } from "open-glass-ui";
export function App() {
return (
<GlassSystemProvider
renderer="auto"
theme={{ appearance: "system" }}
>
<Glass material="frosted">
<Button variant="primary">Create project</Button>
</Glass>
</GlassSystemProvider>
);
}06 / For AI agents
Give your agent the right constraints.
A compact integration prompt tells an agent which facade to use, when enhanced optics are appropriate, and which accessibility behavior must stay intact.
Use the public open-glass-ui facade and import open-glass-ui/styles.css once. Default to CSS-first renderer="auto". Keep all controls as semantic DOM. Use the existing forty recipes before creating custom controls. Require accessible labels, preserve keyboard behavior, reduced motion/transparency, and forced-colors fallbacks. Use open-glass-ui/webgl only for an owned image/canvas/video source. Use open-glass-ui/core for server-safe pure utilities. Keep Next.js server output deterministic.
Geometry, policy, theming, package contracts, and native interaction behavior.
Chromium, Firefox, and WebKit at desktop and mobile boundaries.
The CSS-first package root keeps advanced optics behind an explicit import.
Importing a single component pulls 12.8 KB of the 55.6 KB barrel, so unused components are shaken out rather than shipped.
OpenGlass UI / open source
Make the interface feel dimensional. Keep the product usable.
Explore every live component, theme the system, and take a production-minded glass foundation into your next React project.