v5.0.2 · canonical names, layered CSS, neutral glass

Interfaces that feel hand-polished by light.

A React and Next.js component system for Liquid Glass interfaces. 5.0 ships aura-glass@5.0.2 with canonical component names, one layered stylesheet, --ag-* tokens, neutral-glass token enforcement, accessible Storybook quality checks, and responsive layout hardening.

Visually certified

every surface gated

Accessibility quality

stories · states · semantics

Token-pure layouts

responsive · governed

Layered CSS engine

zero-runtime · @layer ag

Canonical 5.0 names

complete public coverage

Recipes & blocks

aura-glass-cli add

0entry points0built-in themesReact 19ESM-onlynpm 5.0.2

// What 5.0 ships

Every public surface, visually certified.

The live demos below import from aura-glass/app-shell, aura-glass/theme, and aura-glass/primitives. Version 5.0 keeps those public surfaces stable while enforcing neutral materials, accessible stories, token-pure responsive layouts, and evidence for every visual target.

Complete visual gateEvery surface gated

Every public component surface is represented in the authoritative full visual audit before it can ship.

Glass pipelineToken-pure by default

Generated materials, persona CSS, contrast, token exports, package exports, and focused glass checks converge without pipeline drift.

Runtime cleanlinessZero leakage

The final source scan found no console, debugger, or TODO leakage, while accessibility and layout suites protect story quality.

aura-glass/app-shell · certified in 5.0

App chrome inherits the neutral-glass surface contract

Composable layout pieces for dashboards and SaaS surfaces. The shell below renders the canonical 5.0 compound parts — AppShell with TopBar, Sidebar, AppShell.Main, AppShell.PageHeader, Breadcrumbs, and StatusBar. The 4.x Glass* adapters in aura-glass/compat remain as a migration bridge; new code composes these parts directly.

AppShell.Root · Main
TopBar
Sidebar
AppShell.PageHeader
Breadcrumbs
StatusBar

import { AppShell, TopBar, Sidebar, StatusBar } from 'aura-glass/app-shell';

aura-glass/app-shellstable in 5.0

Northwind

MRR

$128.4k

▲ 12.4% · this week

Active workspaces

2,108

▲ 184 · 7d

Glass surface ms

14.2

▼ 1.8ms · release verified

Synced · 2s ago

4 collaborators

aura-glass 5.0.2

aura-glass/theme · token-pure in 5.0

The theme engine governs every default glass surface

AuraGlassProvider, createGlassTheme, createBrandTheme, and the usePreference hooks make up the 5.0 theme surface. The material sweep routes neutral backgrounds, borders, highlights, and depth through reviewed tokens before any explicit semantic or brand tint is applied.

AuraGlassProvider
createGlassTheme
createBrandTheme
usePreference
useResolvedPreferences
GlassPreferencesPanel

import { AuraGlassProvider } from 'aura-glass'; import { createGlassTheme, createBrandTheme, usePreference } from 'aura-glass/theme';

Brand

Density

Motion

Cyan glass

aura · comfortable · full

contrast 9.32

color.accent: oklch(0.8283 0.1044 231.9379)
color.onAccent: oklch(0.26 0.016 250)
density.axis: regular
density.scale: 1
motion.axis: system

aura-glass/primitives · dependency-sovereign core

First-party primitives keep core UI self-contained

SSR-safe primitives for building overlays, menus, and focus-managed components. The scene below wires Slot, Portal, FocusScope, Positioner, and DismissableLayer together, with plain roving-tabindex arrow-key navigation between the tabs. Version 5.0 keeps that dependency-sovereign base at aura-glass/primitives.

Slot
Portal
FocusScope
DismissableLayer
Positioner

import { Slot, Portal, FocusScope, DismissableLayer } from 'aura-glass/primitives';
import { Positioner } from 'aura-glass/compat';

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

Featured components

Live registry-backed cards for app chrome, dashboards, media, ecommerce, and AI surfaces.

Recipes & blocks

Copyable product screens with imports, peer notes, accessibility guidance, and provider-safe states.

5.0 release

Canonical names, layered CSS, --ag-* tokens, the compat bridge, and the aura-glass-cli 4to5 codemod.

Full catalog

Search the complete AuraGlass component surface without crowding the launch story.

// Why AuraGlass

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.

One material model for every surface: variant, thickness, and opt-in refraction resolve through reviewed --ag-* tokens, in layered CSS, everywhere.

Material engine

Backdrop-aware tinting samples real-time luminance and lifts text to WCAG AA — even across unpredictable imagery.

aa · 7.3:1

aa · 11.2:1

Contrast Guard

Lightweight · Standard · Enhanced · Cinematic tiers decide material cost and sampling budgets per device.

Quality tiers

Device tilt, micro-interactions, and ripple physics that connect touch to light. Spring-driven, reduced-motion safe.

Motion responsiveness

Server-safe rendering produces identical markup on server and client. No hydration mismatches.

SSR-deterministic

// The 5.0 component surface

Everything is glass.
Nothing feels heavy.

From inputs and toasts to full ecosystem simulators — drop in, theme by persona, ship.

Buttons & CTAs

Form controls

Adaptive AI

Reduced motion

Charts & data

Completion62%

Navigation

OverviewActivityAuditMembers

Feedback & overlays

Synced to ledger

4,820 records reconciled in 1.2s

Contrast lifted

Backdrop luminance changed - text re-tinted to AAA

// Recipes · registry blocks

Starters that scaffold onto the 5.0 package and its neutral glass surfaces.

Copyable app surfaces built only from current package exports, with provider-safe states where runtime wiring is optional. Larger blocks install as owned source with npx aura-glass-cli add <block> (start with app-frame); the 4.x package recipe registry was removed in 5.0.

AI ops control room

Provider readiness, usage budget, rate limits, and prompt-safety review with fail-closed AI state.

provider readinessusage budgetrate limitsprompt safety

Open the recipe

Semantic search console

Indexed documents, query testing, relevance tuning, empty/loading states, and provider-unconfigured messaging.

query testingrelevance tuningempty statesloading states

Open the recipe

Vision review workbench

Upload review, OCR/object/safe-search panels, and an explicit missing-provider state.

upload reviewOCR panelsobject panelssafe search

Open the recipe

Collab

Collaboration room console

Room presence, cursor and selection summary, activity state, and unsupported editing fallback.

presencecursor summaryactivity statesafe fallback

Open the recipe

Support

Support triage workspace

Ticket queue, SLA status, notification center, and disabled AI summary until providers are configured.

ticket queueSLA statusnotifications

Open the recipe

Release

Release command center

Launch checklist, rollout status, changelog preview, evidence links, and rollback actions.

launch checklistrollout statusevidence linksrollback

Open the recipe

Docs

Developer docs portal

Docs navigation, code examples, package entrypoint selector, and release evidence links.

docs navigationcode examplesentrypoint selector

Open the recipe

Marketing

Marketing launch kit

Hero, feature grid, install command, changelog, social proof, and visual evidence section.

herofeature gridinstall commandchangelog

Open the recipe

entry points16

built-in themes4

React floor19

current release5.0.2

// Install

`npm i aura-glass@5.0.2`. Import the stylesheet. Render.

Components, icons, primitives, app shell, focused subpaths, and the theme engine share one install; registry blocks install separately with aura-glass-cli. Optional peers install only when you import from the feature family that needs them.

terminal

npm install aura-glass@5.0.2

# AuraGlass 5.0.2 · run from a fresh app

npx aura-glass-cli doctor --json

npx aura-glass-cli list --json

npx aura-glass-cli add app-frame

npx aura-glass-cli migrate 4to5 --dry-run

# Optional peers · only if you need them

# (see the Optional peers doc for the subpaths that need them)

App.tsx

import { Card, Button } from 'aura-glass'

export default function Hello() {

return (

<Card>

<h2>Welcome back, Mira</h2>

Continue

</Button>

</Card>

)

}

// Start building

Make the next thing feel true.

Crafted in the open. Trusted in production at studios that don't accept rough edges.

Interfaces that feel hand-polished by light.

Every public surface, visually certified.

App chrome inherits the neutral-glass surface contract

The theme engine governs every default glass surface

First-party primitives keep core UI self-contained

A glass primitive, not a CSS preset.

Material engine

Contrast Guard

Quality tiers

Motion responsiveness

SSR-deterministic

Everything is glass.Nothing feels heavy.

Starters that scaffold onto the 5.0 package and its neutral glass surfaces.

npm i aura-glass@5.0.2. Import the stylesheet. Render.

Make the next thing feel true.

Everything is glass.
Nothing feels heavy.

`npm i aura-glass@5.0.2`. Import the stylesheet. Render.