Getting Started

Ragnar is a design system for React built on Radix UI, Tailwind CSS v4, and Class Variance Authority. It provides 60+ accessible components, a powerful three-layer token system, and built-in themes with first-class custom theme support.

Introduction

Ragnar is organized as a monorepo with five packages. For most apps, the only package you need to install is @vasf/ragnar-core — it re-exports the type helpers from @vasf/ragnar-tokens and auto-imports its own CSS.

All components follow the same conventions: they use React.forwardRef, accept className for additional styles, expose a compound component API where appropriate, and use CSS variables from the token system for all colors and spacing.

Packages

@vasf/ragnar-core

60+ React components + RagnarProvider

@vasf/ragnar-tokens

CSS variable tokens (re-exported by core)

@vasf/ragnar-web

Marketing section components

@vasf/ragnar-native

React Native components

Quick Start

Install the core package:

Wrap your app with RagnarProvider. The provider writes the theme attributes onto <html>, lazy-loads the theme's fonts, and persists the user's selections to localStorage.

app/layout.tsx

Importing components from @vasf/ragnar-core automatically includes the bundled stylesheet — no manual CSS import is needed.

Basic Usage

Import components directly from the package:

Theming

Use useRagnarTheme() from inside the provider to read or change the active theme axes. Spacing scales (compact / standard / wide) and curve scales (sharp / slight / sweeping) are independent of the theme and mode, so users can adjust density and roundness without losing the current theme.

Build your own theme on top of a built-in one with createTheme:

Next Steps

  • Read the Installation guide for full setup details (Tailwind v4, TypeScript, all packages).
  • Explore the Theming page for a deeper look at the token system.
  • Browse Components to see all available UI primitives.