Now in public beta

The design system for ambitious products

A three-layer token architecture, built-in dark mode, 60+ accessible components, and first-class custom themes via createTheme. Build faster without compromise.

Built on shadcn/ui primitives.

Everything you need

Ragnar handles the hard parts so you can focus on building great products.

60+ components

A complete set of accessible, composable UI primitives built on Radix UI.

Built-in themes

Industrial Retro and Minimal ship out of the box — and createTheme lets you define your own with token overrides.

3-layer tokens

Primitive → mode → semantic token architecture. Swap themes at runtime with a single attribute.

Fully accessible

WCAG 2.1 compliant with keyboard navigation, ARIA labels, and focus management.

Tailwind v4 + CVA

Variants powered by Class Variance Authority. Works seamlessly with Tailwind CSS v4.

Five packages, one system

Use what you need — tokens, web, native, or all of the above.

  • @vasf/ragnar-core

    60+ React components built on Radix UI, Tailwind v4, and CVA

    Available
  • @vasf/ragnar-tokens

    Three-layer CSS variable token system

    Coming soon
  • @vasf/ragnar-web

    Marketing and landing page section components

    Coming soon
  • @vasf/ragnar-native

    React Native components sharing the same token system

    Coming soon
  • @vasf/ragnar-ai

    AI-focused components: chat, streaming, completions

    Coming soon

Figma file coming soon

Start building today

Install the core package and have your first component on screen in under a minute.

$npm install @vasf/ragnar-core