Introduction

What is Vera UI?

Vera UI is designed to solve common challenges in modern React development:

• Accessibility First: Built on Radix UI primitives with WCAG 2.1 compliance
• Developer Experience: Full TypeScript support with excellent IntelliSense
• Design System Ready: Consistent theming and component patterns
• Production Tested: Battle-tested components used in real applications

Quick Start

If you're ready to jump in, here's the fastest way to get started:

npm install @helgadigitals/vera-ui

import { Button, Card, CardHeader, CardTitle, CardContent } from "@helgadigitals/vera-ui";

function Welcome() {
  return (
    <Card className="w-96">
      <CardHeader>
        <CardTitle>Welcome to Vera UI</CardTitle>
      </CardHeader>
      <CardContent>
        <Button>Get Started</Button>
      </CardContent>
    </Card>
  );
}

For detailed setup instructions including theme configuration, see our Installation Guide.

Component Overview

Vera UI includes 50+ components organized into logical categories:

Key Features

Advanced Components

Vera UI includes several sophisticated components for complex use cases:

• DataTable - Advanced tables with sorting, filtering, and row selection
• SidebarLayout - Complete navigation layouts with grouped/ungrouped items
• Form - Comprehensive form handling with validation support

Tailwind CSS v4 Support

Vera UI is built specifically for Tailwind CSS v4 compatibility:

// Built-in theme integration
<Button className="bg-primary text-primary-foreground hover:bg-primary/90">
  Styled with Tailwind v4
</Button>

TypeScript Excellence

Every component includes comprehensive TypeScript definitions:

import { type ButtonProps } from "@helgadigitals/vera-ui";

// Full type safety and IntelliSense support
const CustomButton: React.FC<ButtonProps> = ({ variant = "default", ...props }) => {
  return <Button variant={variant} {...props} />;
};

Architecture

Vera UI follows these core principles:

• Radix UI Foundation: Accessibility and behavior from Radix UI primitives
• CVA Styling: Uses class-variance-authority for consistent variant management
• Composable Design: Components work together seamlessly
• Theme System: CSS variables for easy customization

Documentation Structure

This documentation is organized to help you find what you need quickly:

• Getting Started - Installation, setup, and basic usage
• Components - Complete component reference with examples
• Examples - Real-world implementation patterns
• Contributing - Guidelines for contributing to the project

Next Steps

For more information about Vera UI's features, philosophy, and detailed getting started guide, visit our main website.