Guides
Guides for shipping premium UI
Practical, opinionated walkthroughs for building with Nova.
Every guide is written to be finished in one sitting. Pick a topic, follow the code, and end with something you can ship.
Featured
Editors' picksInstalling Nova in a fresh app
Wire Nova into Vite, Next, Remix, or Astro in under three minutes — including Tailwind v4 setup and the theme provider.
Ship your first component
Compose a Card + Button + Badge, learn the polymorphic `asChild` pattern, and understand where variants live.
Theming with OKLCH tokens
Rebrand the entire library by editing a handful of CSS variables — plus the perceptual reasoning behind OKLCH.
Assembling a dashboard shell
Sidebar, topbar, command palette, and a scroll-locked content area — the anatomy every SaaS app repeats.
Designing for AI surfaces
Streaming halos, thinking states, citations, and the ergonomics of a copilot that lives inside your app.
Learning paths
View all paths →Start with Nova
From npm install to your first shipped screen.
Accessibility, in depth
Ship interfaces that everyone can use — by default.
The premium feel
The signatures that make Nova feel alive.
All guides
14 of 14Installing Nova in a fresh app
Wire Nova into Vite, Next, Remix, or Astro in under three minutes — including Tailwind v4 setup and the theme provider.
Ship your first component
Compose a Card + Button + Badge, learn the polymorphic `asChild` pattern, and understand where variants live.
Theming with OKLCH tokens
Rebrand the entire library by editing a handful of CSS variables — plus the perceptual reasoning behind OKLCH.
Building a delightful dark mode
Cross-fade transitions, system detection, per-surface elevation, and the pitfalls of naïve inversion.
Nova's motion language
When to use `snap`, `soft`, and `glide` springs — and how signature effects (Halo Hover, Press Sink) compose.
Respecting reduced motion
A pragmatic checklist: what to animate, what to disable, and how to still feel alive when motion is off.
Keyboard-first interfaces
Focus rings, roving tabindex, escape hatches, and the exact shortcuts users expect from every primitive.
Running an accessibility audit
How Nova ships WCAG AA by default — and how to run `axe`, keyboard, and screen-reader passes on your own compositions.
Keeping your bundle small
Tree-shaking with `sideEffects: false`, avoiding barrel-file traps, and measuring per-component cost.
Composition over configuration
Prefer slotting Nova primitives together over adding one more prop — with worked examples for Cards and Menus.
Assembling a dashboard shell
Sidebar, topbar, command palette, and a scroll-locked content area — the anatomy every SaaS app repeats.
Designing a great ⌘K experience
Scoring, recents, keyboard flow, and the tiny details that make a palette feel Raycast-fast.
The Nova CLI workflow
`init`, `add`, `diff`, `doctor` — how to use the CLI to keep components healthy across releases.
Designing for AI surfaces
Streaming halos, thinking states, citations, and the ergonomics of a copilot that lives inside your app.
Have a guide idea?
Open a request and we'll consider it for the next docs pass.