Skip to content

An open source design system that's fully customizable and agent ready.

Get started Browse components

Open source · Built on React Aria Components and TypeStyles · GitHub

bash
pnpm add @var-ui/react @var-ui/core @var-ui/icons react react-dom react-aria-components

Why teams choose Var UI

Compare us to shadcn, Mantine, or Reshaped: Var UI pairs a typed token system with multi-framework output and a docs kit you can fork for your own design system site.

TypeStyles-first

Component recipes and design tokens replace ad-hoc CSS files. Breakpoints, themes, and variants stay type-safe.

Accessibility built in

React bindings use React Aria Components for keyboard, focus, and screen-reader behavior out of the box.

React, Astro, or HTML

Ship with @var-ui/react, @var-ui/astro, or core HTML recipes — the same tokens and visuals everywhere.

Theme system

createDesignTheme() drives color modes, presets, and CSS variables. Swap palettes without rewriting components.

Docs kit

@var-ui/docs powers this site: search, TOC, markdown views, and optional component catalogs.

Agent-ready CLI

npx @var-ui/cli init wires AGENTS.md, component search, and generated docs for coding assistants.

See it in action

Switch themes and frameworks with the controls below. The same components render as React, Astro markup, or core HTML recipes.

Invite a teammate

Role

Deploy queued

Waiting for the previous build to finish.
BetaStable
Build progress72%

Notification preferences

Frequency

Applies instantly.

No projects yet

Create your first project to get started.

Release notes

Published

Themes pin fixed-tone subtrees with modes and data-surface (SURFACE_ATTRIBUTE). See the theming guide for details.

tsx
import { Button } from '@var-ui/react';

Onboarding

Scroll-snap slide.

Billing

Scroll-snap slide.

Reports

Scroll-snap slide.

Integrations

Scroll-snap slide.

Security

Scroll-snap slide.

Layout preview

A

Cell

B

Cell
You're on the Free planUpgrade for unlimited projects and priority support.

Explore

Jump into guides, component demos, theming docs, or the interactive playground.

Documentation

Installation, providers, and architecture guides for new projects.

Getting started → Components

Live demos for every exported component with React, Astro, and HTML snippets.

Browse catalog → Theming

Tokens, themes, color modes, and CSS variables for brand customization.

Customize → Playground

Tune tokens and preview themes interactively before committing to a palette.

Open playground →