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 the current `aura-glass@5.0.2` release and load `aura-glass/styles.css` 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@5.0.2

import 'aura-glass/styles.css';

#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 ^19, react-dom ^19, aura-glass/styles.css
Motion-rich components
motion ^12 only when the selected surface uses aura-glass/motion
Icons
First-party `aura-glass/icons` entrypoint; no icon peer dependency
Forms and validation
react-hook-form ^7 only when a form recipe or aura-glass/forms binding uses it
Date and calendar
@internationalized/date and react-aria-components for aura-glass/date
Charts and analytics
d3-scale and d3-shape for chart adapters framed by aura-glass/data
3D and spatial effects
three, @react-three/fiber, @react-three/drei from aura-glass/three
AI surfaces
The app supplies provider calls; aura-glass/ai renders Thread, Message, and Composer from props

#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.css";` 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