28 copyable Liquid Glass app surfaces.

Dashboard

GlassBadge, GlassButton, GlassCard

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

Use semantic page headings before dashboard metrics. Keep sidebar labels visible unless an icon-only mode has accessible labels. Verify chart text contrast against dark glass surfaces.

Lazy-load chart-heavy panels when they are below the fold. Use compact dashboard widgets in constrained cards.

Ai

GlassBadge, GlassButton, GlassCard

react, react-dom

Keep command labels descriptive. Preserve keyboard focus inside command-palette interactions. Do not stream status updates into assertive live regions unless user action requires it.

Render model telemetry as static cards unless real-time updates are required. Keep canvas/WebGL effects out of the command surface.

Media

LiquidGlassMediaControls, GlassImageViewer, GlassMusicVisualizer

react, react-dom

Expose play, pause, volume, and scrub controls with labels. Provide static media context for reduced-motion users.

Disable analyzer loops when the player is paused. Use compact visualizer mode in cards and route previews.

Dashboard

GlassCard, GlassDataChart, GlassHeatmap, GlassButton

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

Provide text summaries for chart panels. Keep metric deltas readable without relying only on color.

Render static chart snapshots for non-interactive summaries. Lazy-load dense heatmap panels below the fold.

Settings

GlassBadge, GlassButton, GlassCard

react, react-dom, react-hook-form

Use visible labels for billing fields. Keep validation text adjacent to each input. Preserve focus-visible rings on tab and form controls.

Keep settings pages mostly static. Avoid continuous animation in form-heavy flows.

Data

GlassCard, GlassKanbanBoard

react, react-dom

Keep column names visible. Use card click handlers with keyboard-accessible details.

Use compact cards in constrained panels. Disable drag interactions in read-only preview contexts.

Dashboard

GlassCalendar, GlassCard, GlassButton

react, react-dom, date-fns

Expose selected dates and events as text. Keep keyboard focus visible when navigating dates.

Keep calendar event counts bounded in month views. Avoid animating every date cell during route transitions.

Collaboration

CollaborativeGlassWorkspace, GlassBadge, GlassButton, GlassCard, GlassMetricChip, GlassUserPresence

react, react-dom, socket.io-client

Announce collaboration activity without interrupting editing. Keep presence labels available to assistive tech.

Throttle cursor and presence updates. Keep previews inert when disconnected from realtime services.

Data

GlassBadge, GlassButton, GlassCard

react, react-dom

Preserve column headers and row labels. Use buttons with clear accessible names for row actions.

Use virtualization for large data sets. Keep filters and summaries outside continuously animated containers.

Ecommerce

GlassBadge, GlassButton, GlassCard

react, react-dom

Expose product names, prices, quantities, and cart actions as text. Keep recommendation cards keyboard reachable.

Defer recommendation refreshes while users interact with the cart. Use stable image dimensions for product media.

Dashboard

GlassAppShell, GlassTopBar, GlassSidebarRail, GlassMain, GlassPage, GlassPageHeader, GlassStatusBar, GlassCard, GlassButton

react, react-dom

Keep app navigation inside labelled landmarks. Use accessible labels for icon-only rail controls.

Keep app shell navigation static across route transitions. Lazy-load analytics panels below the first viewport.

Ai

GlassBadge, GlassButton, GlassCard

react, react-dom

Use a visible label or aria-label for the command input. Keep live model updates polite unless user-triggered.

Render model telemetry as static cards until realtime updates are needed. Avoid continuous canvas effects in the command path.

Media

GlassWorkspace, GlassWorkspaceHeader, GlassCanvasArea, GlassTimelineRail, LiquidGlassMediaControls, GlassMusicVisualizer

react, react-dom

Expose play state, clip names, and timeline positions as text. Keep review actions reachable by keyboard.

Pause analyzers when preview playback is stopped. Use stable media frame dimensions to avoid layout shift.

Ecommerce

GlassCard, GlassSmartShoppingCart, GlassProductRecommendations, GlassButton

react, react-dom

Expose prices, inventory state, and cart quantity as text. Do not rely on color alone for fulfillment status.

Debounce cart recalculation during quantity changes. Lazy-load recommendation imagery below the operation summary.

Collaboration

GlassWorkspace, GlassInspectorPanel, CollaborativeGlassWorkspace, GlassBadge, GlassButton, GlassCard, GlassMetricChip, GlassUserPresence

react, react-dom, socket.io-client

Announce presence changes politely. Keep participant names visible and not only represented by avatars.

Throttle presence updates in dense workspaces. Disconnect realtime transport when the route is hidden.

Settings

GlassBadge, GlassButton, GlassCard

react, react-dom, react-hook-form

Use labels and validation messages for every billing field. Keep destructive billing actions explicitly labelled.

Keep settings views mostly static while users type. Debounce validation and avoid continuous animation in forms.

Dashboard

GlassCard, GlassDataChart, GlassHeatmap, GlassCommandDock

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

Provide text summaries for chart-heavy panels. Use readable metric deltas that do not rely only on color.

Lazy-load heatmaps and dense analytics panels below the fold. Cache chart data while filters are idle.

Dashboard

GlassCalendar, GlassCard, GlassButton, GlassWorkspacePanel

react, react-dom

Expose selected dates and event times as text. Keep date navigation keyboard reachable.

Load one visible date range at a time. Avoid re-rendering all event chips during filter updates.

Data

GlassBadge, GlassButton, GlassCard

react, react-dom

Preserve ticket IDs, status, priority, and assigned agent as text. Use polite live-region semantics for notifications.

Virtualize large ticket queues. Batch notification updates during import bursts.

Media

GlassFileUpload, GlassImageViewer, GlassMusicVisualizer, GlassCard

react, react-dom

Expose upload status and media metadata as text. Keep media actions reachable by keyboard.

Use stable preview dimensions for uploaded media. Disable analyzer loops under reduced motion.

Ai

GlassBadge, GlassButton, GlassCard, GlassErrorState, GlassMetricChip, GlassProgress

react, react-dom

Use warning severity for provider-unconfigured states without interrupting page navigation. Expose budget, rate-limit, and review states as text in addition to color. Keep prompt-safety review actions keyboard reachable.

Poll provider readiness on an interval only after credentials are configured. Render usage and cost panels as static summaries until realtime telemetry is enabled.

Ai

GlassBadge, GlassButton, GlassCard, GlassEmptyState, GlassErrorState, GlassLoadingState, GlassSearchField

react, react-dom

Label search input and relevance controls clearly. Keep empty search results announced as polite status text. Do not expose semantic scores through color alone.

Debounce query previews and cancel stale provider requests. Load document chunks in pages instead of rendering the full index.

Ai

GlassBadge, GlassCard, GlassEmptyState, GlassErrorState, GlassFileUpload

react, react-dom

Provide text alternatives for uploaded images before automated analysis. Keep OCR and object-detection results available as plain text. Use polite status updates for analysis progress.

Use stable preview dimensions for image review panels. Defer OCR/object detection until the user explicitly starts analysis.

Collaboration

GlassBadge, GlassButton, GlassCard, GlassEmptyState, GlassErrorState, GlassMetricChip, GlassUserPresence

react, react-dom, socket.io-client

Expose participant names and room status as text, not avatar-only UI. Announce presence changes politely. Clearly label unsupported editing states before users enter content.

Throttle cursor, selection, and presence updates. Disconnect room transport when the route is hidden or unsupported.

Support

GlassBadge, GlassButton, GlassCard, GlassErrorState, GlassMetricChip, GlassNotificationCenter

react, react-dom

Preserve ticket IDs, priority, owner, and SLA state as readable text. Use polite notification semantics for queue changes. Disable AI summary actions with an explanation when providers are missing.

Virtualize large ticket queues. Batch SLA and notification updates during imports.

Release

GlassBadge, GlassButton, GlassCard, GlassEmptyState, GlassMetricChip, GlassProgress, GlassTimeline

react, react-dom

Keep checklist state textual and visible without color dependency. Expose rollout progress with a labelled progressbar. Label rollback and publish actions with explicit risk language.

Load evidence reports as links instead of embedding large artifacts. Avoid continuous animation in release monitoring panels.

Docs

GlassBadge, GlassButton, GlassCard, GlassEmptyState, GlassSearchField

react, react-dom

Keep docs navigation in labelled landmarks. Use copyable code blocks with visible text labels. Expose package entrypoints as text, not icon-only controls.

Static-render high-traffic docs pages where possible. Lazy-load playgrounds and heavy examples below the fold.

Marketing

AuroraBackground, DisplayText, FeatureTile, GlassButton, InstallCommand, LogoMark, ShowcaseCard

react, react-dom

Keep hero copy semantic and avoid placing primary page content inside decorative backgrounds. Use reduced-motion-safe aurora settings for default launch surfaces. Ensure install commands and proof points remain readable without animation.

Use deterministic particles and reduced-motion defaults for marketing previews. Keep visual proof media dimensions stable to avoid layout shift.