AuraGlassby AuraOne5.0.2
Get started
Documentation menu · Getting Started
Recipes

10 copyable Liquid Glass app surfaces.

AuraGlass 5.0.2 recipes use real package imports with visible setup notes, optional peer guidance, accessibility checklists, performance notes, and provider-safe states for AI/runtime starters.

#Revenue dashboard shell

Import aura-glass/styles.css once at the app root, then compose AppShell with TopBar, Sidebar, and AppShell.Main. Table (from aura-glass/data) takes data and column definitions as props.

Revenue OpsSaaS dashboard
$128.4k
MRR$128k
Pipeline$2.1M
Churn1.8%
82%Health64NPS91%Uptime
Category
Dashboard
Imports
Card, AppShell, Sidebar, TopBar, Table
Optional peers
Accessibility
Sidebar navigation carries an aria-label and a current item; Table takes a caption as its accessible name.
Performance
Static shell with no continuous animation; pass only the rows the view renders.
tsx

#AI command center

Render CommandPalette around a Command composition (Command.Root, Command.Input, Command.List, Command.Item) inside a client component. The app owns what each command does.

Model cockpitAI command
⌘K
AI42QA12DOC
Ask AuraGlass to summarize telemetry
Context42 docs
Latency212ms
Quality98%
SummarizeAnomalyRollout
Category
Ai
Imports
Card, Command, CommandPalette
Optional peers
Accessibility
CommandPalette opens with Cmd/Ctrl+K by default, moves focus into the command input, and returns focus to the opener on close.
Performance
The palette renders its popup only while open; keep command lists scoped to the current product surface.
tsx

#AI ops control room

Compose Card and Badge from aura-glass with StatCard and Table from aura-glass/data to surface provider readiness, usage budgets, and prompt-safety gates.

Provider controlAI ops room
$420
80%Rate
OpenAI MissingAnthropic IdleFallback Ready
Budget$420
SafetyReview
Spend63%
Provider missing blocks model execution
Category
Ai
Imports
Card, Badge, StatCard, Table
Optional peers
Accessibility
Provider status badges expose text labels alongside status dots; budget and rate metrics remain readable in dark and light themes.
Performance
Fail-closed provider cards render static telemetry until the application wires a live provider endpoint.
tsx

#Semantic search console

Combine CommandPalette and Tabs from aura-glass inside a dark-ready Card.Root surface while keeping vector index queries in app-owned routes.

Semantic indexSearch console
0 docs
Search indexed documents
DocsAPINotesLogsIndex
Query test QueuedRelevance 0.72Provider Missing
Category
Ai
Imports
Card, Command, CommandPalette, Tabs
Optional peers
Accessibility
Search input and relevance tabs preserve keyboard focus order and announce empty or provider-unconfigured states.
Performance
Keep query testing debounced in app state and render static empty states when no index provider is configured.
tsx

#Vision review workbench

Use Card, Badge, Button, and Tabs from aura-glass to frame upload review, OCR findings, and explicit missing-provider states.

Vision QAReview workbench
12 images
Frame 12OCR ready · 3 objectsQA
OCR panelReadyObject panelReadySafe searchQueued
Category
Ai
Imports
Card, Button, Badge, Tabs
Optional peers
Accessibility
Review actions and OCR/safe-search panels expose explicit button labels and keyboard-navigable tabs.
Performance
Bound image previews and keep OCR or object-detection inference behind explicit user actions.
tsx

#Collaboration room console

Frame collaborative notes inside AppShell, TopBar, and Sidebar from aura-glass/app-shell with Card and Badge from aura-glass.

Room consoleCollaboration room
View-only
Review notes

Selections stay visible. Editing is view-only in this room.

Presence remains on the canvas while comments stay in the rail.

UX
PRUXQA
EditingUnsupportedSelectionsVisible
Category
Collaboration
Imports
Card, Badge, AppShell, Sidebar, TopBar
Optional peers
Accessibility
Presence indicators and view-only room notices are rendered as text so screen readers announce room capabilities accurately.
Performance
Room presence and selection summaries update from lightweight state without continuous canvas loops.
tsx

#Support triage workspace

Pair StatCard and Table from aura-glass/data with Card and Badge from aura-glass for SLA tracking and fail-closed AI triage.

Fail-closed AISupport triage
38 tickets
New 18Risk 7Escalate 3
AI summary unavailable until provider configured
SLA14m
Queue38
Risk7
Category
Support
Imports
Card, Badge, StatCard, Table
Optional peers
Accessibility
SLA badges and queue tables include text labels and table captions rather than color-only priority indicators.
Performance
Ticket queues render bounded page slices in Table while AI summaries stay disabled until a provider is configured.
tsx

#Release command center

Use Card, Button, and Badge from aura-glass with StatCard and Table from aura-glass/data to track release gates, evidence links, and rollback readiness.

Ship roomRelease command
5.0.2
QADocsDeployRollback
Recipes10
EvidenceReady
RollbackArmed
Category
Release
Imports
Card, Button, Badge, StatCard, Table
Optional peers
Accessibility
Rollout gates and rollback controls use explicit button labels and accessible status badges.
Performance
Checklist and gate status rows render statically with zero idle animation.
tsx

#Developer docs portal

Compose AppShell, Sidebar, and TopBar from aura-glass/app-shell with Card and Button from aura-glass for a dark-first docs portal.

Docs portalDeveloper docs
5.0.2
InstallThemingRecipesMigration
import { Card }from "aura-glass";<Card variant="identity" />
EntrypointsReadyCode blocksCopyable
Category
Docs
Imports
Card, Button, AppShell, Sidebar, TopBar
Optional peers
Accessibility
Sidebar navigation marks the current route with aria-current and code blocks expose keyboard-accessible copy actions.
Performance
Documentation routes remain server-friendly and static, hydrating only interactive code copy and command search islands.
tsx

#Marketing launch kit

Combine Card, Button, and Badge from aura-glass with StatCard from aura-glass/data for launch heroes, install strips, and release proof grids.

Launch kitMarketing surface
Hero proof
AuraGlass 5.0.2Build the work surface that ships.
InstallRecipesSocial
Category
Marketing
Imports
Card, Button, Badge, StatCard
Optional peers
Accessibility
Hero CTAs, install copy buttons, and proof tiles keep visible focus outlines and descriptive aria-labels.
Performance
Static glass surfaces and token-driven highlights keep LCP fast and respect prefers-reduced-motion.
tsx