Installation

@vasf/ragnar-core

The main component library. Includes all components, the cn() utility, the RagnarProvider for theming, and full TypeScript types. The core package re-exports the token helpers from @vasf/ragnar-tokens, so you typically don't need to install anything else.

Importing any component from @vasf/ragnar-core automatically pulls in the bundled styles.css — there is no manual CSS import to remember. (You can still import @vasf/ragnar-core/styles.css explicitly if your bundler requires it.)

Wrap with RagnarProvider

Wrap your app once near the root. The provider sets the data-theme, data-mode, data-spacing, and data-curvesattributes on the document, lazy-loads the theme's fonts, and persists the user's selections to localStorage.

Read or update the active theme axes from anywhere in the tree using useRagnarTheme():

Tailwind v4 (optional)

Ragnar is built on Tailwind CSS v4. If your project also uses Tailwind for its own styles, no preset is required — Ragnar's CSS works alongside yours. Just point Tailwind's scan at the package so the utility classes used by Ragnar components are emitted:

@vasf/ragnar-tokens

The design token package. Ships the three-layer CSS variable system, theme font CSS files, and TypeScript types. You only need this for advanced customization — @vasf/ragnar-core already re-exports the type helpers (themes, modes, type Theme, etc).

@vasf/ragnar-web

Marketing and landing page sections — Hero, Feature grid, Pricing, CTAs, Testimonials. Requires @vasf/ragnar-core.

@vasf/ragnar-native

React Native components that share the same token system as the web package.

TypeScript

All Ragnar packages ship with full TypeScript definitions. No additional @types/* packages are needed.