Documentation menu · Getting Started
Start Here

Installation

The minimal install is `aura-glass`; optional peers are added only for the component families the app actually uses.

#Core Install

Every app starts with the same two requirements: install `aura-glass` and load `aura-glass/styles` once. That is enough for core surfaces, buttons, cards, layout wrappers, many navigation elements, and copy-safe examples.

Do not add every optional dependency at install time. The package supports broad component families, but a simple card or dashboard shell should not force chart, 3D, AI, realtime, or media dependencies into an app that does not use them.

bash
npm install aura-glass

import 'aura-glass/styles';

#Peer Dependencies by Feature

Install peers only for the selected component family. This makes dependency review easier, keeps starter screens lighter, and avoids confusing errors where an agent installs a heavy peer because it saw an unrelated component in the catalog.

If a component page or recipe lists a peer, add it next to the feature that needs it. Charts should bring chart peers. 3D surfaces should bring Three.js peers. AI and realtime features should be configured in the app environment, not inside static docs examples.

Core controls and surfaces
react, react-dom, aura-glass/styles
Motion-rich components
framer-motion if the selected component imports motion primitives
Icons and command surfaces
lucide-react
Forms and Radix-backed controls
@radix-ui/react-* and react-hook-form as documented per component
Charts and analytics
chart.js and react-chartjs-2
3D and spatial effects
three, @react-three/fiber, @react-three/drei from aura-glass/three
AI and server services
openai or service-specific environment configuration

#Install Verification

A correct install should typecheck, render a visible glass surface, preserve focus outlines, and avoid hydration warnings. If the component renders unstyled, the stylesheet is missing. If the import fails, confirm the export name against the docs index or component detail page.

For application adoption, the first check is simple: create one screen, import the stylesheet once, render a core surface, and verify the page in the browser at desktop and mobile widths.

Unstyled component
Confirm `import "aura-glass/styles";` is loaded at the app root
Missing export
Use the component detail page or docs index before renaming imports
Optional peer error
Install only the peer family required by that component
Hydration warning
Move interactive components behind an explicit client boundary