v4.0.0 · visual hardening, complete certification, neutral glass

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.

498 visual gates

498 passed · 0 blocked

Accessibility quality

stories · states · semantics

Token-pure layouts

responsive · governed

Aeonik typography

licensed · locally bundled

470 visual exports

complete public coverage

28 recipes

aura-glass/registry

0visual exports0visual gates passed0pipeline checks0recipesnpm 4.0.0

// What 4.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 4.0 keeps those public surfaces stable while enforcing neutral materials, accessible stories, token-pure responsive layouts, and evidence for every visual target.

Complete visual gate498 passed · 0 blocked

Every one of the 470 renderable exports and 28 package recipes is represented in the authoritative full visual audit.

Glass pipeline31 passed · 0 warnings

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

Runtime cleanliness760 files · 0 findings

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

aura-glass/app-shell · certified in 4.0

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.

GlassAppShell
GlassTopBar
GlassSidebarRail
GlassMain · GlassPage
GlassPageHeader
GlassBreadcrumbs
GlassStatusBar

import { GlassAppShell, GlassTopBar, GlassSidebarRail } from 'aura-glass/app-shell';

aura-glass/app-shellstable in 4.0

Northwind

Live

MRR

$128.4k

▲ 12.4% · this week

Active workspaces

2,108

▲ 184 · 7d

Glass surface ms

14.2

▼ 1.8ms · release verified

Synced · 2s ago4 collaboratorsaura-glass 4.0.0

aura-glass/theme · token-pure in 4.0

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.

GlassThemeProvider
createBrandGlassTheme
useGlassTheme
useGlassDensity
useGlassMotionPolicy
contrastRatio

import { GlassThemeProvider, useGlassTheme, createBrandGlassTheme } from 'aura-glass/theme';

Brand

Density

Motion

Cyan glass

dark · comfortable · expressive

contrast 10.49

color.brand: #22d3ee
color.accent: #c084fc
density.controlHeight: 2.5rem
density.radius: 0.75rem
motion.duration: 220ms

aura-glass/primitives · dependency-sovereign core

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.

Slot
Portal
FocusScope
DismissableLayer
RovingFocusGroup
Positioner

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

Featured components

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

28 recipes

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

4.0 release

Neutral-glass hardening, 498 passing visual gates, accessibility story checks, Aeonik typography, and upgrade notes.

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.

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.

LiquidGlass material

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

Ultra · High · Balanced · Efficient profiles decide shader cost, particle density, 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

SeededRandom and safe DOM helpers render identical markup on server and client. No hydration mismatches.

SSR-deterministic

// Visual exports · 470 of them

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

Completion

+12.4% this week

Navigation

Feedback & overlays

Synced to ledger

4,820 records reconciled in 1.2s

Contrast lifted

Backdrop luminance changed - text re-tinted to AAA

// Recipes · aura-glass/registry

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.

AI ops control room

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

GlassErrorStateGlassMetricChipGlassProgressGlassBadge

$ npx aura-glass add ai-ops-control-room

Semantic search console

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

GlassSearchFieldGlassDataGridGlassEmptyStateGlassErrorState

$ npx aura-glass add semantic-search-console

Vision review workbench

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

GlassFileUploadGlassImageViewerGlassLoadingStateGlassErrorState

$ npx aura-glass add vision-review-workbench

Collab

Collaboration room console

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

GlassUserPresenceGlassMetricChipGlassEmptyStateGlassErrorState

$ npx aura-glass add collaboration-room-console

Support

Support triage workspace

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

GlassDataTableGlassNotificationCenterGlassMetricChip

$ npx aura-glass add support-triage-workspace

Release

Release command center

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

GlassTimelineGlassProgressGlassMetricChipGlassEmptyState

$ npx aura-glass add release-command-center

Docs

Developer docs portal

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

GlassSearchFieldGlassTabsGlassEmptyStateGlassBadge

$ npx aura-glass add developer-docs-portal

Marketing

Marketing launch kit

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

DisplayTextFeatureTileInstallCommandShowcaseCard

$ npx aura-glass add marketing-launch-kit

visual exports

470

frost surfaces

max blur

48px

recipes

// Install

`npm 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.

terminal

npm install aura-glass@4.0.0

# AuraGlass 4.0.0 · run from a fresh app

npx aura-glass doctor --json

npx aura-glass list --json

npx aura-glass add release-command-center

npx aura-glass add marketing-launch-kit

# Optional peers · only if you need them

npm install chart.js react-chartjs-2 socket.io-client

App.tsx

import { GlassCard, GlassButton } from 'aura-glass'

export default function Hello() {

return (

<h2>Welcome back, Mira</h2>

Continue

</GlassButton>

</GlassCard>

)

}

// Start building

Make the next thing feel true.

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