Getting Started

Versa UI is an evolving React component library built on a solid design foundation. It combines a broad collection of components and patterns with deep customization through a true multi-theme architecture, flexible styling and a structured token system built on Tailwind CSS.

With extensive variations, composable building blocks, data visualization, and ready-made templates, Versa UI gives you a strong framework while keeping the freedom to shape the experience around your product.

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

Get access to a theme-flexible, production-grade UI system crafted for designers and builders.

Multi-Theme Architecture

Four visual themes (Core, Glassmorphism, Brutalism, and Humanist) with light and dark modes, adapting automatically at runtime via design tokens.

Accessible by Default

Full keyboard navigation, ARIA attributes, focus management, and screen reader support built into every component from day one.

Copy-Paste Architecture

Own every line of code with zero black-box dependencies. Drop components into your project and customise freely with full control.

Design Token Driven

Colours, typography, spacing, and shadows controlled via CSS variables. Swap a few tokens to adapt the entire system seamlessly.

Composable Components

132+ composable components. Combine primitives like Material, Button, and Dropdown into rich patterns with ease.

Built-in Charts

Native data visualisations (Donut, Gauge, Sparkline) that automatically inherit active theme tokens and dark mode with zero configuration.

Production-Ready Templates

Real-world dashboard templates pre-assembled with responsive layouts, navigation, metrics, and charts to accelerate development.

Expressive Style

Elevate visual depth with rich composite gradients, tactile inset shadows, and duotone iconography driven by theme tokens.

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.

Tech Stack

Why Versa UI

FAQs

On this page