Skip to main content

​
Introduction

The @repo/ui package is a comprehensive UI component library that provides reusable, accessible, and beautifully designed components for building modern web applications. All components are built with:
  • Radix UI - For accessibility and unstyled primitives
  • Tailwind CSS - For styling and theming
  • TypeScript - For type safety
  • class-variance-authority - For component variants

​
Installation

The package is part of the Money monorepo and can be imported in any workspace application: 
import { Button, Card, Input } from "@repo/ui";

​
Available Components

Buttons

Interactive button components with multiple variants and states

Inputs

Form input components including text inputs and password inputs

Cards

Card components for displaying content in various layouts

Modals

Modal dialogs and confirmation dialogs

Sidebar

Collapsible sidebar navigation components

Dashboard Wrapper

Layout components for building dashboard pages

​
Component Exports

The package exports all components through a central index file: 
// Buttons
export { Button, buttonVariants } from "./button";

// Inputs
export { Input, PasswordInput } from "./input";

// Cards
export {
  Card,
  CardHeader,
  CardFooter,
  CardTitle,
  CardDescription,
  CardContent,
  LongCard,
  MetricCard,
  ChartCard,
  StatCard,
  QuickActionCard,
} from "./card";

// Modals
export { Modal, ConfirmDialog } from "./modal";

// Sidebar
export {
  Sidebar,
  SidebarProvider,
  SidebarContent,
  SidebarTrigger,
  useSidebar,
  // ... and more
} from "./sidebar";

// Dashboard Layout
export {
  DashboardWrapper,
  DashboardLayout,
  DashboardPageHeader,
  DashboardContent,
} from "./dashboard-wrapper";

​
Utilities

The package also exports utility functions and hooks:
  • cn - Tailwind class name merger utility
  • useIsMobile - Hook for detecting mobile viewports
import { cn, useIsMobile } from "@repo/ui";

​
Design Principles

​
Accessibility First

All components are built with accessibility in mind, using Radix UI primitives that provide:
  • Keyboard navigation
  • Screen reader support
  • ARIA attributes
  • Focus management

​
Customizable

Every component accepts a className prop for easy customization: 
<Button className="custom-class">Click me</Button>

​
Consistent API

Components follow consistent patterns:
  • Props extend native HTML attributes
  • Forward refs for DOM access
  • Variant-based styling with CVA

​
Theming

Components use CSS variables for theming, defined in globals.css. The theme supports:
  • Light and dark modes
  • Customizable color palettes
  • Responsive design tokens

​
Dependencies

​
@radix-ui/*
packages
Radix UI primitives for accessible component foundations
​
class-variance-authority
package
Type-safe variant management for components
​
lucide-react
package
Icon library for UI elements
​
tailwind-merge
package
Utility for merging Tailwind CSS classes

Build docs developers (and LLMs) love

Get started for freeTalk to us