Getting started

• React — use the same major version as your framework expects (React 18+ or 19+ as peer).
• Tailwind CSS v4 — the theme package ships the Tailwind entry; your app should consume it from a single root import (see below).
• @spry/patterns is optional — add it when you need screen-level layouts (auth, dashboard shells) built from the same tokens.

If something fails to style or theme, check Troubleshooting first, then Architecture for how packages fit together.

SpryInnovation ships as workspace packages. From your application, add the core packages you need (minimum: @spry/theme and @spry/ui).

Import the Tailwind entry once at your app root. It loads fonts, design tokens as CSS variables, and Tailwind v4 with the correct content sources for Spry components. Token names and layering are documented under Tokens.

Wrap your tree with SpryProvider so data-spry-theme, locale, and density apply to the document. Use useSpry or useSpryTheme for controlled color mode. Theme behavior and presets are covered in Theming.

If you use the Next.js App Router, you can put SpryProvider in app/layout.tsx and keep the CSS import alongside it so every route shares the same theme and typography. Adjust defaultTheme and density to match your product.

Import primitives only from published package names — never deep-link into the monorepo. Here is the smallest working button.

• Browse components — interactive previews and API notes for each primitive.
• Philosophy & standards — how we think about accessibility, density, and consistency.
• Dashboard pattern — when you are ready for full-page structure.