AuraGlass Recipes

#SaaS Dashboard Shell

Import styles in the root shell, install chart peers only if `GlassDataChart` is rendered, and feed dashboard cards with app data.

Revenue command$128.4k

MRR18.6%

Pipeline$2.1M

Churn1.8%

82Health

64NPS

91Uptime

Category

Dashboard

Imports

GlassDashboard, GlassCard, GlassDataChart, GlassSidebar

Optional peers

react, react-dom, chart.js, react-chartjs-2

Accessibility

Use one h1 for the dashboard, keep sidebar labels visible, give chart summaries in text, and preserve keyboard focus across filters.

Performance

Keep chart panels lazy, use contained dashboard sizing in embeds, and pause realtime refresh when the route is hidden.

tsx

import {
  GlassCard,
  GlassDashboard,
  GlassDataChart,
  GlassDataGrid,
  GlassSidebar,
} from 'aura-glass';
import 'aura-glass/styles';

export function RevenueDashboard() {
  return (
    <GlassDashboard
      title="Revenue command"
      contained
      compact
      maxHeight={720}
    >
      <GlassSidebar contained compact showToggle={false} />
      <GlassCard>
        <GlassDataChart />
      </GlassCard>
      <GlassDataGrid />
    </GlassDashboard>
  );
}

#AI Command Center

Use a client component for command search, add icon peers only when the command list renders icons, and keep service calls outside the visual component.

Ask AuraGlass to summarize telemetry

Context42 docs

Latency212ms

Quality98%

Summarize telemetry ⌘KOpen anomaly report 12Draft rollout note AI

Category

Imports

GlassCommandPalette, GlassCard, GlassDataGrid

Optional peers

react, react-dom, lucide-react

Accessibility

Keep command labels action-oriented, preserve arrow-key movement, and announce long-running model jobs through app-owned status text.

Performance

Render telemetry as static cards by default and stream updates only for active jobs or focused panels.

tsx

import { GlassCard, GlassCommandPalette, GlassDataGrid } from 'aura-glass';
import 'aura-glass/styles';

export function AiCommandCenter() {
  return (
    <GlassCard depth="medium">
      <GlassCommandPalette
        open
        contained
        compact
        positionStrategy="inline"
        placeholder="Search agents, jobs, and documents..."
      />
      <GlassDataGrid />
    </GlassCard>
  );
}

#Media Player Surface

Use a client island for browser media APIs and keep analyzer or waveform work behind explicit playback state.

Category

Media

Imports

LiquidGlassMediaControls, GlassImageViewer, GlassMusicVisualizer

Optional peers

react, react-dom

Accessibility

Expose play, pause, volume, scrub, captions, and fullscreen controls with labels; keep poster alt text meaningful.

Performance

Start with static poster art, disable analyzer loops under reduced motion, and pause visualizers when playback stops or the tab is hidden.

tsx

import { GlassImageViewer, GlassMusicVisualizer, LiquidGlassMediaControls } from 'aura-glass';
import 'aura-glass/styles';

export function MediaSurface() {
  const track = { title: 'Aurora Drift', artist: 'AuraOne', duration: 180 };

  return (
    <section aria-label="Now playing">
      <GlassImageViewer alt="Aurora Drift album art" />
      <LiquidGlassMediaControls
        playing
        currentTime={42}
        duration={track.duration}
        aria-label={track.title}
      />
      <GlassMusicVisualizer compact contained isPlaying />
    </section>
  );
}

#Settings and Billing Page

Import styles once and install form peers only when the form helper components are used.

Pro plan$249/mo

Seats 24Usage alerts OnInvoice email ops@aura

Save changes

Category

Saas

Imports

GlassCard, GlassButton, GlassTabs, GlassForm

Optional peers

react, react-dom, react-hook-form

Accessibility

Use visible labels, validation messages, disabled-state copy, and focus rings for every billing field and destructive action.

Performance

Keep settings pages mostly static, debounce validation, and avoid continuous animation while users are typing.

tsx

import { GlassButton, GlassCard, GlassForm, GlassTabs } from 'aura-glass';
import 'aura-glass/styles';

export function SettingsBilling() {
  return (
    <GlassCard depth="medium" tint="neutral">
      <h2>Billing settings</h2>
      <GlassTabs value="billing" aria-label="Settings sections" />
      <GlassForm aria-label="Billing contact and payment method" />
      <GlassButton variant="primary">Save changes</GlassButton>
    </GlassCard>
  );
}

#Collaborative Workspace

Connect realtime services only in the app environment; static docs should render mock presence and inert comments.

GCAKML

Live review3 teammates editing

Category

Collaboration

Imports

CollaborativeGlassWorkspace, GlassCollaborativeComments, GlassCard

Optional peers

react, react-dom, socket.io-client

Accessibility

Announce collaboration activity politely, keep editor focus stable, and expose comments as navigable review items.

Performance

Throttle cursor and presence updates, batch comment events, and disconnect realtime clients when the workspace unmounts.

tsx

import { CollaborativeGlassWorkspace, GlassCard } from 'aura-glass';
import 'aura-glass/styles';

export function CollaborativeWorkspaceRecipe() {
  return (
    <GlassCard depth="medium">
      <CollaborativeGlassWorkspace
        compact
        contained
        workspaceId="launch-review"
      />
    </GlassCard>
  );
}

#Analytics Overview

Install chart peers for chart panels and keep raw analytics queries outside the visual component.

Growth model94.2%

Users48k

Conv.12.4%

Spend$18k

Category

Analytics

Imports

GlassCard, GlassDataChart, GlassDataGrid, GlassTabs

Optional peers

react, react-dom, chart.js, react-chartjs-2

Accessibility

Summarize chart trends in nearby text and keep filter tabs keyboard reachable.

Performance

Lazy-load chart-heavy panels and prefer static snapshots until the user opens a drilldown.

tsx

import { GlassCard, GlassDataChart, GlassDataGrid, GlassTabs } from 'aura-glass';
import 'aura-glass/styles';

export function AnalyticsOverview() {
  return (
    <GlassCard depth="medium">
      <GlassTabs value="growth" aria-label="Analytics views" />
      <GlassDataChart />
      <GlassDataGrid />
    </GlassCard>
  );
}

#Kanban Workspace

Use app data for columns and tasks, and keep command search in a client component.

KSMJRA

Sprint board12 tasks moving through review

Category

Workspace

Imports

GlassKanbanBoard, GlassCard, GlassDrawer, GlassCommandPalette

Optional peers

react, react-dom, lucide-react

Accessibility

Expose column names, task titles, and selected task details without relying only on drag interactions.

Performance

Virtualize large task lists and keep drawers mounted only while a task is being edited.

tsx

import { GlassCard, GlassCommandPalette, GlassDrawer, GlassKanbanBoard } from 'aura-glass';
import 'aura-glass/styles';

export function KanbanWorkspace() {
  return (
    <GlassCard depth="medium">
      <GlassCommandPalette contained compact positionStrategy="inline" />
      <GlassKanbanBoard contained height={520} showHeader showToolbar />
      <GlassDrawer contained title="Task details" />
    </GlassCard>
  );
}

#Calendar Schedule

Keep schedule data in the app layer and pass selected events into the visual surface.

Launch calendarMay

Design review 10:00Partner demo 13:30Release sync 16:00

New event

Category

Scheduling

Imports

GlassCalendar, GlassCard, GlassPopover, GlassButton

Optional peers

react, react-dom

Accessibility

Use readable event names, keyboard date navigation, and non-color status labels.

Performance

Load one visible date range at a time and keep popovers static until opened.

tsx

import { GlassButton, GlassCalendar, GlassCard, GlassPopover } from 'aura-glass';
import 'aura-glass/styles';

export function CalendarSchedule() {
  return (
    <GlassCard depth="medium">
      <GlassCalendar aria-label="Launch schedule" />
      <GlassPopover trigger={<GlassButton>New event</GlassButton>}>
        Add launch review, demo, or release checkpoint.
      </GlassPopover>
    </GlassCard>
  );
}

#Admin Data Table

Use app-owned filtering and pagination state; import file upload only when bulk actions are enabled.

Filter customers by status, plan, and risk

Rows2.4k

Active81%

Risk17

Category

Admin

Imports

GlassDataTable, GlassDataGrid, GlassCard, GlassFileUpload

Optional peers

react, react-dom

Accessibility

Keep column headers visible, expose row actions as buttons, and label upload/dropzone controls.

Performance

Use pagination or virtualization for large tables and avoid rendering every row at once.

tsx

import { GlassCard, GlassDataGrid, GlassDataTable, GlassFileUpload } from 'aura-glass';
import 'aura-glass/styles';

export function AdminDataTable() {
  return (
    <GlassCard depth="medium">
      <GlassFileUpload compact contained showActions={false} />
      <GlassDataTable aria-label="Customer accounts" />
      <GlassDataGrid />
    </GlassCard>
  );
}

#Ecommerce Product Panel

Keep cart state in the app and use AuraGlass for the product panel, recommendations, and checkout chrome.

Add to cart

Aurora Lens $189Recommendations 4Bundle match 92%

Category

Ecommerce

Imports

GlassSmartShoppingCart, GlassProductRecommendations, GlassCard, GlassButton

Optional peers

react, react-dom

Accessibility

Expose product names, prices, cart quantity, and recommendation labels as text.

Performance

Lazy-load recommendations and avoid recalculating product imagery while cart state changes.

tsx

import { GlassButton, GlassCard, GlassProductRecommendations, GlassSmartShoppingCart } from 'aura-glass';
import 'aura-glass/styles';

export function EcommerceProductPanel() {
  return (
    <GlassCard depth="medium">
      <h2>Aurora Lens</h2>
      <GlassProductRecommendations />
      <GlassSmartShoppingCart compact />
      <GlassButton variant="primary">Add to cart</GlassButton>
    </GlassCard>
  );
}