GlassDashboard Component — AuraGlass by AuraOne

Documentation menu · Data Display

#Overview

Loading preview

Status

live

#Install and Import

Install the package once, import the component from the public entry, and load styles a single time at the app root.

shell

npm install aura-glass@4.0.0

import

import { GlassDashboard } from 'aura-glass'

styles

import 'aura-glass/styles';

#Examples

Three baseline shapes flagship components use across docs and AI-agent guidance:

Basic

tsx

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

export function DashboardExample() {
  return (
    <GlassDashboard title="Revenue command" contained compact maxHeight={720}>
      <GlassSidebar />
      <GlassCard>Revenue, pipeline, and churn KPIs</GlassCard>
      <GlassDataGrid />
    </GlassDashboard>
  );
}

Production

Use GlassDashboard as the app shell for product-level dashboards. Keep data loading in the route, pass serializable data into the dashboard island, and keep chart-heavy panels lazy.

Contained

For docs cards or embeds, use contained sizing, compact density, and a fixed max height so dashboard chrome cannot escape the preview frame.

#Accessibility

Use a single page heading, preserve sidebar labels, provide text summaries for charts, and keep keyboard focus visible through filters and grid controls.

#SSR and Performance

Lazy-load charts, virtualize large grids, and pause realtime dashboard refresh when the route is hidden.

#Theming

Theme with public props, `className`, `style`, and AuraGlass CSS variables. Avoid private DOM selectors so the component can upgrade with the package.