Install and Setup — AuraGlass by AuraOne

#Install and Load the Material

Start with the published package and the stable stylesheet entrypoint. AuraGlass is not a copy-paste primitive kit; the CSS file is part of the component contract because it carries tokens, glass materials, overlay layers, focus rings, reduced-motion rules, and component density defaults.

Import the stylesheet once in the app root. Component files should import components from `aura-glass`, not private build output, source paths, or this website repository. That keeps examples portable for React, Next.js, AI agents, and package upgrades.

bash

npm install aura-glass

import 'aura-glass/styles';

#Build the First Screen

For a first implementation, use `GlassCard` and `GlassButton` before adding heavy media, chart, or 3D features. This proves the package import, stylesheet, tokens, focus states, and SSR behavior are working without optional peer complexity.

Once the core surface is stable, move to an app-shaped composition such as `GlassDashboard`, `GlassCommandPalette`, `GlassDataGrid`, or `LiquidGlassMediaControls`. Keep layout in the app and let AuraGlass own the material, interaction states, and component chrome.

tsx

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

export function BillingCard() {
  return (
    <GlassCard depth="medium" tint="neutral">
      <h2>Revenue</h2>
      <p>$128,400</p>
      <GlassButton>Open dashboard</GlassButton>
    </GlassCard>
  );
}

#Choose by Product Job

Choose components by product job, not by visual novelty. A dashboard should start with dashboard, navigation, data, and chart components. An AI product should start with command, search, card, and data surfaces. A media tool should start with media controls and static fallback states.

Do not invent component names. If a desired surface is not exported, use the closest documented public component or a recipe. 3.1 documents valid names so both humans and coding agents can generate working code.

Premium SaaS dashboard

GlassDashboard, GlassSidebar, GlassCard, GlassDataGrid, GlassDataChart

Command center or AI search

GlassCommandPalette, GlassCard, GlassDataGrid, GlassTabs

Settings and billing

GlassCard, GlassButton, GlassTabs, GlassForm, GlassFileUpload

Data-heavy admin

GlassDataTable, GlassDataGrid, GlassVirtualTable, GlassDataChart

Modal workflow

GlassModal, GlassDialog, GlassDrawer, GlassPopover

Media player

LiquidGlassMediaControls, GlassImageViewer, GlassMusicVisualizer

Kanban or project workspace

GlassKanbanBoard, GlassCard, GlassDrawer, GlassCommandPalette

Calendar or scheduling

GlassCalendar, GlassCard, GlassPopover

Collaboration surface

CollaborativeGlassWorkspace, GlassCollaborativeComments, GlassCard

Ecommerce cart or panel

GlassSmartShoppingCart, GlassProductRecommendations, GlassCard

#When AuraGlass Fits

Use AuraGlass when the product needs a premium Liquid Glass identity out of the box: executive dashboards, AI command centers, media interfaces, ecommerce flows, collaboration workspaces, and app chrome where visual quality is part of the product.

Use a neutral primitive kit when source ownership, lowest possible visual opinion, or conventional CRUD speed matters more than a finished material system. The right comparison is not which library has more exports; it is whether the product needs a finished glass system or neutral building blocks.