@liberty/ui-kit

Reusable UI component library for SaaS projects, built on React, TypeScript, Tailwind CSS, and Radix UI.

Features

• Themeable — CSS variables for easy theme customization per project
• Accessible — Built on Radix UI primitives with WCAG compliance
• Dark Mode — Full dark mode support via .dark class
• Tree-shakeable — Import only what you need
• Storybook — Interactive component documentation

Installation

npm install @liberty/ui-kit

Setup

1. Import the base styles and a theme in your app entry:

// app/globals.css (or main.tsx)
import "@liberty/ui-kit/styles";
import "@liberty/ui-kit/themes/liberty.css";

2. Use components:

import { Button, Card, CardContent } from "@liberty/ui-kit";

export function MyComponent() {
  return (
    <Card>
      <CardContent>
        <Button>Click me</Button>
      </CardContent>
    </Card>
  );
}

Custom Theme

To create a new theme, override CSS variables:

/* my-project-theme.css */
:root {
  --primary: 270 50% 60%;      /* Purple instead of sky blue */
  --secondary: 270 50% 48%;
  --primary-foreground: 0 0% 100%;
  /* ... override other tokens as needed */
}

Components

UI Primitives

Button, Input, Label, Textarea, Checkbox, RadioGroup, Switch, Select, Card, Badge, Avatar, Separator, Skeleton, Progress, Tabs, Dialog, AlertDialog, Tooltip, Popover, DropdownMenu, Accordion, Sheet, ScrollArea, Toggle, ToggleGroup, Slider, Toast, Command, Breadcrumb, Pagination, Table, Resizable, AspectRatio, Calendar

Composite Components

Combobox, DatePicker, DateRangePicker, FileUpload, EmptyState, LoadingOverlay, PageHeader, ProcessStepper, StatCard, Sidebar

Charts

LineChart, BarChart, PieChart, AreaChart, Sparkline

Development

npm install
npm run storybook   # Component development
npm run build       # Build for production