Getting Started With AuraGlass
Install AuraGlass, import the stylesheet once, and render a polished Liquid Glass card in a React or Next.js app.
#Install and Load the Material
Start with the published `aura-glass@5.0.2` 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.
npm install aura-glass@5.0.2
import 'aura-glass/styles.css';#Build the First Screen
For a first implementation, use `Card` and `Button` 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 `AppShell` (from `aura-glass/app-shell`), `CommandPalette`, `Table` (from `aura-glass/data`), or `MediaControls` (from `aura-glass/media`). Keep layout in the app and let AuraGlass own the material, interaction states, and component chrome.
import { Button, Card } from 'aura-glass';
import 'aura-glass/styles.css';
export function BillingCard() {
return (
<Card.Root>
<Card.Title>Revenue</Card.Title>
<Card.Body>
<p>$128,400</p>
<Button prominent>Open dashboard</Button>
</Card.Body>
</Card.Root>
);
}#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. Version 5.0 keeps canonical names, focused subpaths, and recipe metadata explicit so both humans and coding agents can generate working code.
#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.