@helgadigitals/vera-ui

A modern, accessible React component library built with Radix UI primitives and styled with Tailwind CSS. Part of the Vera UI design system.

⚡ Quick Start

npm install @helgadigitals/vera-ui

Basic Usage

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

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

🎨 Tailwind CSS Setup

Vera UI is built with Tailwind CSS v4 and only supports Tailwind CSS v4

Tailwind v4 (Recommended)

/* In your main CSS file */
@import "tailwindcss";
@import "@helgadigitals/vera-ui/dist/vera-ui.css";

🧩 Components

Form Components

• Button - Primary actions and interactions
• Input - Text input with validation states
• Textarea - Multi-line text input
• Select - Dropdown selection
• Checkbox - Binary selection input
• RadioGroup - Single selection from options
• Switch - Toggle control
• Label - Form field labels
• Form - Form management with validation

Data Display

• Card - Content container with sections
• Badge - Status indicators and tags
• Avatar - User profile images
• Separator - Visual content dividers
• Skeleton - Loading placeholders
• DataTable - Advanced table with sorting/filtering
• Pagination - Page navigation control
• Accordion - Collapsible content sections

Navigation

• Sidebar - Reusable navigation sidebar
• SidebarLayout - Complete layout with sidebar
• Breadcrumb - Navigation hierarchy
• Tabs - Tabbed content navigation

Overlays

• Dialog - Modal dialogs
• Sheet - Slide-out panels
• Drawer - Mobile-friendly bottom drawer
• Popover - Floating content containers
• Tooltip - Contextual help text
• DropdownMenu - Action menus
• AlertDialog - Confirmation dialogs

Feedback

• Alert - Status messages
• Progress - Loading indicators
• Toast - Temporary notifications

Utilities

• Command - Command palette interface
• Combobox - Searchable select
• Calendar - Date picker
• FileUpload - File upload with drag & drop
• ThemeProvider - Theme management

✨ Features

• 🎯 Accessible - Built with Radix UI primitives for excellent accessibility
• 🎨 Customizable - Easy to customize with CSS variables and Tailwind classes
• 🌙 Dark Mode - Built-in support for light and dark themes
• 📱 Responsive - Mobile-first design approach
• 🔧 Developer Friendly - Full TypeScript support with excellent IntelliSense
• 🚀 Modern - Uses latest React patterns and best practices
• 🎭 Tailwind Flexible - Compatible Tailwind CSS v4
• 🧩 Composable - Build complex UIs with simple, reusable components
• ⚡ Performant - Optimized for production with tree-shaking support

🛠 Development

Architecture

This component library follows these key patterns:

• Radix UI Foundation: All components extend Radix UI primitives for accessibility
• CVA Styling: Uses class-variance-authority for variant-based styling
• Utility-First CSS: Built with Tailwind CSS for rapid customization
• TypeScript: Full type safety with comprehensive prop interfaces

Key Components

The Button component serves as the canonical example of our architecture:

import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"

const buttonVariants = cva(
  "inline-flex items-center justify-center rounded-md text-sm font-medium",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 rounded-md px-3",
        lg: "h-11 rounded-md px-8",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

Utilities

• cn() - Combines clsx and tailwind-merge for conditional classes
• Theme Context - React Context for theme management

🎨 Theming

Vera UI uses CSS variables for theming, making it easy to customize:

:root {
  --primary: 221.2 83.2% 53.3%;
  --primary-foreground: 210 40% 98%;
  --background: 0 0% 100%;
  --foreground: 224 71.4% 4.1%;
  --muted: 220 14.3% 95.9%;
  --muted-foreground: 220 8.9% 46.1%;
  /* ... */
}

.dark {
  --background: 224 71.4% 4.1%;
  --foreground: 210 40% 98%;
  /* ... */
}

📚 Documentation

• Documentation Site - Complete component documentation

🔧 TypeScript Support

All components are fully typed with TypeScript:

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

interface CustomButtonProps extends ButtonProps {
  loading?: boolean;
}

const CustomButton: React.FC<CustomButtonProps> = ({ 
  loading, 
  children, 
  disabled,
  ...props 
}) => {
  return (
    <Button disabled={disabled || loading} {...props}>
      {loading ? "Loading..." : children}
    </Button>
  );
};

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

Development Setup

# Clone the repository
git clone https://github.com/helgadigitals-limited-company/vera-ui.git
cd vera-ui

# Install dependencies
pnpm install

# Start development
pnpm dev:ui

📦 Build Information

• Bundle: ESM and CJS builds
• Styles: Separate CSS file for both Tailwind v3 and v4
• Types: Full TypeScript definitions included
• Tree Shaking: All components are tree-shakeable

🔗 Links

• GitHub Repository
• NPM Package
• Documentation
• Issue Tracker

📄 License

MIT © HelgaDigitals

Built with ❤️ by the Vera UI team