Getting Started

Versa UI is a production-ready React component library with a built-in multi-theme design system. It ships 4 distinct visual themes — each with light and dark modes — and a growing set of composable, accessible components that adapt their appearance automatically.

Use the theme switcher in the navigation bar to see every component transform in real time.

Tech Stack

Versa UI keeps its dependencies minimal so you can focus on building.

Class Variance Authority

v0.7

Why Versa UI

Multi-Theme Architecture

Four complete visual themes — Core, Glassmorphism, Brutalism, and Humanist — each with light and dark modes. Every component adapts automatically through design tokens. Switch themes at runtime with zero code changes.

Accessible by Default

Components ship with full keyboard navigation, ARIA attributes, focus management, and screen reader support. Accessibility isn't an afterthought — it's built into the component architecture from day one.

Copy-Paste Architecture

Versa UI follows a copy-paste model — you own every line of code. No black-box dependencies. Drop components into your project, customise freely, and maintain full control over your codebase.

Design Token Driven

Colours, typography, spacing, corner radii, shadows, and effects are all controlled through CSS custom properties. Swap a few tokens and the entire system adapts — from buttons to modals to glassmorphism surfaces.

Composable Components

30+ components built with composition in mind. Combine primitives like Material, Segment, and AccordionItem into complex patterns. Each component does one thing well and composes with everything else.

FAQs

How do I install Versa UI?

Copy the components you need from packages/ui/src/components into your project along with the theme CSS files from packages/ui/src/styles/themes/. Import the theme(s) you need in your app's entry point, set a data-theme attribute on your root element, and you're ready to go. See the Installation page for detailed steps.

Can I use only specific components?

Yes. Components are designed to be independent — you can copy just the ones you need. Each component's documentation page lists its dependencies so you know exactly what to include.

Does it support dark mode?

Every theme ships with both light and dark modes. Toggle between them by changing the data-mode attribute on your root element. All design tokens automatically adapt — no extra configuration needed.

How do themes work?

Themes are sets of CSS custom properties (design tokens) applied via data-theme on the root element. Switching themes swaps all tokens at once — colours, typography, spacing, corner radii, shadows, and effects. Components consume these tokens and adapt automatically.

Is it production-ready?

Versa UI is actively developed and used in production. Components are fully typed with TypeScript, accessible, and tested across modern browsers. The design token system ensures consistent rendering across all themes and modes.

On this page