Privateers Design System - A modern React component library built with Radix UI, CVA, and Tailwind CSS
npm install @privateers/uiPrivateers Design System - A modern React component library built with Radix UI, CVA, and Tailwind CSS v4.
``bash`
npm install @privateers/uior
pnpm add @privateers/uior
yarn add @privateers/ui
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";
`
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, TooltipContentButton Variants
`tsx
`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
}
``MIT