@privateers/ui

Privateers Design System - A modern React component library built with Radix UI, CVA, and Tailwind CSS v4.

Installation

``bash
npm install @privateers/ui


or

pnpm add @privateers/ui

or

yarn add @privateers/ui
`

Setup

$3

Add the design system styles to your main CSS file:

`css
/ app/globals.css or src/index.css /
@import "tailwindcss";
@import "@privateers/ui/styles";

/ Scan the design system components /
@source "../node_modules/@privateers/ui/dist/*/.js";
`

$3

Add Google Fonts to your HTML :

`html



`

Or in Next.js, use next/font:

`tsx
// app/layout.tsx
import { Figtree } from 'next/font/google'

const figtree = Figtree({
subsets: ['latin'],
variable: '--font-sans',
})

export default function RootLayout({ children }) {
return (

{children}

)
}
`

Usage

`tsx
import { Button, Card, Input, Label } from '@privateers/ui'

export function MyComponent() {
return (





)
}
`

Available Components

$3

- Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter

$3

- Button - Primary actions with multiple variants
- Input - Text input fields
- Label - Form labels
- Checkbox - Checkbox inputs
- Select - Dropdown selections

$3

- Badge - Status indicators
- Skeleton - Loading placeholders
- Separator - Visual dividers

$3

- Tabs, TabsList, TabsTrigger, TabsContent

$3

- Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription
- Popover, PopoverTrigger, PopoverContent
- Tooltip, TooltipProvider, TooltipTrigger, TooltipContent

Button Variants

`tsx
Primary
Secondary
Outline
Ghost
Link
Destructive

Small
Default
Large

`

Dark Mode

The design system supports dark mode via the .dark class on a parent element:

`tsx

{/ Dark mode enabled /}

`

Or toggle dynamically:

`tsx
document.documentElement.classList.toggle('dark')
`

Design Tokens

The design system uses OKLch colors for perceptually uniform color relationships:

| Token | Description |
|-------|-------------|
| --primary | Primary brand color (Indigo) |
| --secondary | Secondary color (Zinc) |
| --background | Page background |
| --foreground | Text color |
| --muted | Muted backgrounds |
| --accent | Accent color |
| --destructive | Error/danger color |
| --border | Border color |
| --ring | Focus ring color |

TypeScript

Full TypeScript support with exported types:

`tsx
import type { ButtonProps } from '@privateers/ui'

const MyButton: React.FC = (props) => {
return
}
``

License

MIT