Documentation

Get started with Vireya

Vireya is a free-to-build-with React design system — tokenized components, pre-composed blocks and a theming engine in versioned packages, no Tailwind required. Here is the fastest path from an empty app to your first themed, accessible component.

1. Install the packages

Vireya ships as three composable packages. @vireya/core holds the design tokens and theme helpers, @vireya/ui the components, and @vireya/next the React/Next.js theme provider and global styles.

pnpm add @vireya/ui @vireya/core @vireya/next

React 19 and React DOM are peer dependencies, so make sure your app is on React 19 or newer.

2. Wrap your app in the ThemeProvider

The provider injects the --v-* design tokens and powers light/dark switching. Import the base stylesheet once at the root and wrap your tree:

import { ThemeProvider } from "@vireya/next";
import "@vireya/next/styles";

export default function RootLayout({ children }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  );
}

3. Use your first component

Every component is importable on its own subpath, so your bundle only ships what you actually use:

import { Button } from "@vireya/ui/form/button";

export function Example() {
  return <Button size="lg">Ship it</Button>;
}

4. Make it yours with a theme

A tier-based palette (background, secondary, primary, accent) generated from a few HSL inputs lets you stand up a fully branded theme — light and dark — without touching component styles. See how it works in the theming & design tokens guide.

Explore what ships in the box

Browse every family with live examples and source in the blocks showcase and the charts showcase. If you are weighing Vireya against other libraries, start with why teams choose Vireya or the side-by-side comparisons.

Component reference (props & specs)

The full per-component specification — every prop, variant, state and a live playground — lives in the component reference at docs.mapree.dev. Reach for it whenever you need the exact API of a @vireya/ui component; this page only covers getting set up.

Vireya is free to build with for non-commercial use; shipping a commercial or closed-source product needs a commercial license. See the pricing tiers for details.