@versaui/ui

v0.3.2

Published

11 days ago

Versa UI — A free, production-ready React component library with design tokens, theming, and accessible components.

0High
0Medium
0Low

react component-library design-system design-tokens ui-components tailwindcss accessible typescript

A free, production-ready React component library with a built-in design token system, accessible components, and theming support.

Documentation · Components · Website

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 surfaces.

Accessible by Default

Components ship with full keyboard navigation, ARIA attributes, focus management, and screen reader support. Built on React Aria, accessibility is baked into every component 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.

Composable Components

35+ 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.

Light and Dark Mode

Every component supports both light and dark modes out of the box. Toggle between them by changing the data-mode attribute on your root element - all design tokens automatically adapt.

Minimal Dependencies

Built on React 19, Tailwind CSS 4, TypeScript 5, and Class Variance Authority. No heavy runtime dependencies - just the essentials for building fast, modern UIs.

| Category | Components | |---|---| | Actions | Button, Compact Icon Button, Link Button, Social Button, Button Group | | Data Entry | Text Input, Text Area, OTP Input, Search Bar, Checkbox, Radio, Toggle, Slider, Dropdown, File Upload, Image Upload | | Data Display | Avatar, Badge, Tag, Status Tag, Brand Icon, Country Flag, Logo, Tooltip, Divider, Progress Bar, Circular Progress Bar | | Feedback | Alert, Toast, Notification, Modal, Status Modal | | Navigation | Bar Tabs, Container Tabs, Breadcrumbs, Side Navigation, Top Navigation, Segmented Control, Pagination | | Layout | Material, Accordion |

Getting Started

Prerequisites

React 18.0+ (React 19 recommended)
Tailwind CSS 4.0+
A bundler like Vite, Next.js, or Webpack

Install Dependencies

npm install react react-dom tailwindcss clsx tailwind-merge class-variance-authority @phosphor-icons/react

Interaction and Accessibility

npm install @react-aria/focus @react-aria/interactions @react-aria/button @react-aria/progress @react-aria/utils react-aria-components

Dropdown Positioning

npm install @floating-ui/react

CSS Setup

Import the required styles in your main CSS file. Order matters:

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Manrope:[email protected]&display=swap');

/* Tailwind */
@import "tailwindcss";

/* Versa UI Design Tokens */
@import "./path-to/styles/primitives.css";
@import "./path-to/styles/base.css";

/* Theme */
@import "./path-to/styles/themes/core.css";

Theme Setup

Set the active theme using data attributes on your root element:

<html data-theme="core" data-mode="light">

Toggle dark mode by changing data-mode to "dark".

Use a Component

import { Button } from './components/Button/Button';
import { Tooltip } from './components/Tooltip/Tooltip';

function App() {
  return (
    <Tooltip content="Welcome to Versa UI!" placement="top">
      <Button variant="primary" size="default">
        Hover Me
      </Button>
    </Tooltip>
  );
}

Tech Stack

| Technology | Version | Purpose | |---|---|---| | React | v19 | UI framework | | TypeScript | v5 | Type safety | | Tailwind CSS | v4 | Utility-first styling | | Class Variance Authority | v0.7 | Component variants | | React Aria | Latest | Accessibility primitives | | Phosphor Icons | v2 | Icon system | | Floating UI | Latest | Dropdown positioning |

Project Structure

src/
├── assets/          # SVG icons, logos, flags, avatars
├── components/      # All UI components
├── generated/       # Auto-generated data (brand icons)
├── styles/
│   ├── primitives.css    # Primitive color tokens
│   ├── base.css          # Base tokens and Material styles
│   └── themes/
│       └── core.css      # Core theme (light + dark)
└── utils/
    └── cn.ts        # Class name merge utility

License

This project is licensed under the MIT License.