Skip to main content

​
Introduction

The @repo/ui package is Openlane’s internal component library that provides a collection of reusable React components built on top of Radix UI primitives and styled with Tailwind CSS v4. The library follows modern design patterns and includes both basic UI elements and complex composite components.

​
Architecture

The component library is structured as a monorepo package with the following characteristics:
  • Framework Agnostic: Built with React 19.2.4 and can be used in any React application
  • TypeScript First: Full TypeScript support with comprehensive type definitions
  • Modular Exports: Each component is exported individually to enable tree-shaking
  • Design System: Consistent theming with CSS variables and Tailwind v4
  • Accessibility: Built on Radix UI primitives for WAI-ARIA compliance

​
Component Categories

The library includes over 50 components organized into the following categories:

Form Components

Input, Textarea, Select, Checkbox, Radio Group, Switch, Form, Password Input, Tag Input, Input OTP, Multiple Selector

Action Components

Button, Alert Dialog, Confirmation Dialog, Dialog, Sheet, Dropdown Menu, Command

Data Display

Table, Data Table, Badge, Avatar, Card Panel, Panel, Tag, Pagination, Progress Circle

Navigation

Breadcrumb, Tabs, Separator, Page Heading

Feedback

Alert, Toast, Toaster, Tooltip, System Tooltip, Info, Message Box

Data Entry

Calendar, Calendar Popover, Date Picker, Slider

Layout

Grid, Panel, Card Panel, Popover

Rich Content

Plate UI (Rich text editor components), Chart, Line Chart, Donut Chart

​
Key Features

​
Variant-Based Styling

Components use class-variance-authority (CVA) for type-safe variant styling: 
import { Button } from '@repo/ui/button'

export function Example() {
  return (
    <>
      <Button variant="primary">Primary</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="destructive">Delete</Button>
    </>
  )
}

​
Composition Pattern

Many components follow a composition pattern for flexibility: 
import { Alert, AlertTitle, AlertDescription } from '@repo/ui/alert'

export function Example() {
  return (
    <Alert>
      <AlertTitle>Heads up!</AlertTitle>
      <AlertDescription>
        You can add components to your app using the CLI.
      </AlertDescription>
    </Alert>
  )
}

​
Form Integration

Seamless integration with React Hook Form: 
import { Form, FormField, FormItem, FormLabel, FormControl } from '@repo/ui/form'
import { Input } from '@repo/ui/input'
import { useForm } from 'react-hook-form'

export function Example() {
  const form = useForm()
  
  return (
    <Form {...form}>
      <FormField
        control={form.control}
        name="email"
        render={({ field }) => (
          <FormItem>
            <FormLabel>Email</FormLabel>
            <FormControl>
              <Input placeholder="[email protected]" {...field} />
            </FormControl>
          </FormItem>
        )}
      />
    </Form>
  )
}

​
Dark Mode Support

All components support dark mode out of the box using CSS variables: 
// Dark mode is automatically applied when the 'dark' class is present
<div className="dark">
  <Button variant="primary">Dark Mode Button</Button>
</div>

​
Utility Functions

The library includes helper utilities:

​
cn() - Class Name Merger

Combines clsx and tailwind-merge for intelligent class merging: 
import { cn } from '@repo/ui/lib/utils'

const className = cn(
  'text-base',
  'text-lg', // This will override text-base
  condition && 'font-bold'
)

​
Design Tokens

The component library uses a comprehensive set of design tokens defined in CSS variables:
  • Colors: Primary, secondary, accent, destructive, muted, etc.
  • Spacing: Consistent padding and margin scales
  • Typography: Font families, sizes, and weights
  • Borders: Border radius and border colors
  • Shadows: Elevation system for depth

​
Dependencies

The library leverages industry-standard dependencies:
  • React 19.2.4: Latest React with concurrent features
  • Radix UI: Unstyled, accessible components
  • Tailwind CSS 4.1.13: Utility-first CSS framework
  • class-variance-authority: Type-safe component variants
  • lucide-react: Beautiful, consistent icons
  • react-hook-form: Performant form library
  • @hookform/resolvers: Schema validation resolvers
  • zod: TypeScript-first schema validation
  • platejs: Plate rich text editor
  • @platejs/*: Plate plugins for tables, markdown, AI, etc.
  • recharts: Composable charting library
  • @tanstack/react-table: Headless table library
  • date-fns: Modern date utility library
  • sonner: Toast notifications
  • cmdk: Command palette component

​
Package Structure

The package follows a modular structure: 
packages/ui/
├── src/
│   ├── alert/          # Alert components
│   ├── button/         # Button component
│   ├── form/           # Form components
│   ├── input/          # Input component
│   ├── icons/          # Custom icon components
│   ├── plate-ui/       # Rich text editor UI
│   └── styles.css      # Global styles and tokens
├── lib/
│   ├── utils.ts        # Utility functions
│   ├── chartUtils.tsx  # Chart helpers
│   └── windowResize.tsx # Responsive utilities
├── package.json        # Package configuration
└── postcss.config.mjs  # PostCSS configuration

​
Export Structure

Components are exported individually for optimal tree-shaking: 
{
  "exports": {
    "./styles.css": "./src/styles.css",
    "./button": "./src/button/button.tsx",
    "./input": "./src/input/input.tsx",
    "./lib/utils": "./lib/utils.ts"
  }
}

​
Next Steps

Installation

Learn how to install and configure the component library

Usage Guide

Explore basic usage patterns and examples

Theming

Customize components with Tailwind CSS v4

Storybook

Browse components in Storybook

Build docs developers (and LLMs) love

Get started for freeTalk to us