Interfaces that feel hand-polished by light.
A React and Next.js component system for Liquid Glass interfaces. 4.0 certifies aura-glass@4.0.0 across 470 renderable exports and 28 recipes, with 498 passing visual gates, neutral-glass token enforcement, accessible Storybook quality checks, responsive layout hardening, and licensed Aeonik typography.
Every public surface, visually certified.
The live demos below import from aura-glass/app-shell, aura-glass/theme, and aura-glass/primitives. Version 4.0 keeps those public surfaces stable while enforcing neutral materials, accessible stories, token-pure responsive layouts, and evidence for every visual target.
Every one of the 470 renderable exports and 28 package recipes is represented in the authoritative full visual audit.
Generated materials, persona CSS, contrast, token exports, package exports, and focused glass checks converge without pipeline drift.
The final source scan found no console, debugger, or TODO leakage, while new accessibility and layout suites protect story quality.
App chrome inherits the neutral-glass surface contract
Composable layout pieces for dashboards and SaaS surfaces. The shell below renders GlassAppShell with GlassTopBar, GlassSidebarRail, GlassMain, GlassPage, GlassPageHeader, GlassBreadcrumbs, and GlassStatusBar. Version 4.0 keeps the public imports stable while hardening responsive containment and neutral default materials.
GlassAppShellGlassTopBarGlassSidebarRailGlassMain · GlassPageGlassPageHeaderGlassBreadcrumbsGlassStatusBar
import { GlassAppShell, GlassTopBar, GlassSidebarRail } from 'aura-glass/app-shell';Production
Live revenue rail
Rendered with GlassAppShell, GlassTopBar, GlassSidebarRail, GlassMain, GlassPage, GlassPageHeader, and GlassStatusBar — all from aura-glass/app-shell.
Theme Engine 2.0 governs every default glass surface
GlassThemeProvider, useGlassTheme, useGlassDensity, useGlassMotionPolicy, and createBrandGlassTheme remain stable. In 4.0, the material sweep routes neutral backgrounds, borders, highlights, and depth through reviewed tokens before any explicit semantic or brand tint is applied.
GlassThemeProvidercreateBrandGlassThemeuseGlassThemeuseGlassDensityuseGlassMotionPolicycontrastRatio
import { GlassThemeProvider, useGlassTheme, createBrandGlassTheme } from 'aura-glass/theme';- color.brand
#22d3ee- color.accent
#c084fc- density.controlHeight
2.5rem- density.radius
0.75rem- motion.duration
220ms
First-party primitives keep core UI self-contained
Six SSR-safe primitives for building overlays, menus, and focus-managed components. The scene below wires Slot, Portal, FocusScope, RovingFocusGroup, Positioner, and DismissableLayer together. Version 4.0 adds stricter accessible-story and layout-quality evidence around that dependency-sovereign base.
SlotPortalFocusScopeDismissableLayerRovingFocusGroupPositioner
import { Slot } from 'aura-glass/primitives/slot';
import { Portal } from 'aura-glass/primitives/portal';
import { FocusScope } from 'aura-glass/primitives/focus';
import { Positioner } from 'aura-glass/primitives/positioning';
import { RovingFocusGroup } from 'aura-glass/primitives/roving-focus';
import { DismissableLayer } from 'aura-glass/primitives/dismissable-layer';Click the trigger. The popover is rendered through <Portal>, anchored with <Positioner>, focus-trapped by <FocusScope>, and dismissed via <DismissableLayer> on outside click or Escape.
Selected · all
Live registry-backed cards for app chrome, dashboards, media, ecommerce, and AI surfaces.
28 recipesCopyable product screens with imports, peer notes, accessibility guidance, and provider-safe states.
4.0 releaseNeutral-glass hardening, 498 passing visual gates, accessibility story checks, Aeonik typography, and upgrade notes.
Full catalogSearch the complete AuraGlass component surface without crowding the launch story.
A glass primitive, not a CSS preset.
Every component shares a single material model — so blur, refraction, contrast, and motion stay coherent from a toast to a full-page modal.
LiquidGlass material
Physically accurate Snell's law refraction with tunable IOR bands from 1.33 to 1.52, plus thickness controls. WebGL where available, CSS everywhere else.
Contrast Guard
Backdrop-aware tinting samples real-time luminance and lifts text to WCAG AA — even across unpredictable imagery.
Quality tiers
Ultra · High · Balanced · Efficient profiles decide shader cost, particle density, and sampling budgets per device.
Motion responsiveness
Device tilt, micro-interactions, and ripple physics that connect touch to light. Spring-driven, reduced-motion safe.
SSR-deterministic
SeededRandom and safe DOM helpers render identical markup on server and client. No hydration mismatches.
Everything is glass.
Nothing feels heavy.
From inputs and toasts to full ecosystem simulators — drop in, theme by persona, ship.
Synced to ledger
4,820 records reconciled in 1.2s
Contrast lifted
Backdrop luminance changed - text re-tinted to AAA
All 28 starters scaffold onto the 4.0 package and its adaptive glass surfaces.
The package registry now ships 28 copyable app surfaces. Run npx aura-glass add <recipe> and the files land in src/components/auraglass/recipes, importing only from the public package surface with provider-safe states where runtime wiring is optional.
Provider readiness, usage budget, rate limits, and prompt-safety review with fail-closed AI state.
GlassErrorStateGlassMetricChipGlassProgressGlassBadge$ npx aura-glass add ai-ops-control-roomIndexed documents, query testing, relevance tuning, empty/loading states, and provider-unconfigured messaging.
GlassSearchFieldGlassDataGridGlassEmptyStateGlassErrorState$ npx aura-glass add semantic-search-consoleUpload review, OCR/object/safe-search panels, and an explicit missing-provider state.
GlassFileUploadGlassImageViewerGlassLoadingStateGlassErrorState$ npx aura-glass add vision-review-workbenchRoom presence, cursor and selection summary, activity state, and unsupported editing fallback.
GlassUserPresenceGlassMetricChipGlassEmptyStateGlassErrorState$ npx aura-glass add collaboration-room-consoleTicket queue, SLA status, notification center, and disabled AI summary until providers are configured.
GlassDataTableGlassNotificationCenterGlassMetricChip$ npx aura-glass add support-triage-workspaceLaunch checklist, rollout status, changelog preview, evidence links, and rollback actions.
GlassTimelineGlassProgressGlassMetricChipGlassEmptyState$ npx aura-glass add release-command-centerDocs navigation, code examples, package entrypoint selector, and release evidence links.
GlassSearchFieldGlassTabsGlassEmptyStateGlassBadge$ npx aura-glass add developer-docs-portalHero, feature grid, install command, changelog, social proof, and visual evidence section.
DisplayTextFeatureTileInstallCommandShowcaseCard$ npx aura-glass add marketing-launch-kitnpm i aura-glass@4.0.0. Import the stylesheet. Render.
Components, icons, primitives, app shell, focused subpaths, Theme Engine 2.0, and the 28-recipe registry share one install. Optional peers install only when you import from the feature family that needs them.
npm install aura-glass@4.0.0Make the next thing feel true.
Crafted in the open. Trusted in production at studios that don't accept rough edges.