Interfaces that feel hand-polished by light.
A React and Next.js component system for Liquid Glass interfaces. 3.4 publishes aura-glass@3.4.4 with redesigned white-frost surfaces, a 16–48px blur scale, hairline borders with inset edge light, and one unified backdrop filter — on the same 439 exports, focused subpaths, and 28 copyable recipes.
Luminous white-frost surfaces, deeper blur, and one glass system.
The live demos below import from aura-glass/app-shell, aura-glass/theme, and aura-glass/primitives — and every surface they render now uses the 3.4 frost tokens: 16–48px blur, 1px hairlines, inset edge light, and a single unified backdrop filter.
3.4 redesigns every intent and elevation as low-alpha white frost with hairline borders and inset edge light.
TypeScript utilities, generated CSS, the .glass foundation, and the dark theme now render identically.
Invisible comment-as-value backgrounds and dead utility classes fixed across 100+ files, verified by 2,373 tests.
App chrome rendered on the redesigned surfaces
Composable layout pieces for dashboards and SaaS surfaces. The shell below renders GlassAppShell with GlassTopBar, GlassSidebarRail, GlassMain, GlassPage, GlassPageHeader, GlassBreadcrumbs, and GlassStatusBar. In 3.4 every shell panel is luminous white frost over the backdrop instead of an opaque dark slab.
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 rides the new surface tokens
GlassThemeProvider, useGlassTheme, useGlassDensity, useGlassMotionPolicy, and createBrandGlassTheme. The panel below sets a brand color, density, and motion policy; in 3.4 brand tints render as tinted glass over the unified frost surfaces instead of recoloring opaque panels.
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. 3.4 keeps that dependency-sovereign base underneath the redesigned glass.
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.
3.4 releaseWhite-frost surface redesign, unified backdrop filter, rendering audit results, 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 now scaffold onto the 3.4 white-frost 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. 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-glassMake the next thing feel true.
Crafted in the open. Trusted in production at studios that don't accept rough edges.