@privateers/ui
v0.3.0
Published
Privateers Design System - A modern React component library built with Radix UI, CVA, and Tailwind CSS
Maintainers
beefyjerkReadme
@privateers/ui
Privateers Design System - A modern React component library built with Radix UI, CVA, and Tailwind CSS v4.
Installation
npm install @privateers/ui
# or
pnpm add @privateers/ui
# or
yarn add @privateers/uiSetup
1. Configure Tailwind CSS v4
Add the design system styles to your main CSS file:
/* 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";2. Add Figtree Font
Add Google Fonts to your HTML <head>:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Geist+Mono:[email protected]&display=swap" rel="stylesheet">Or in Next.js, use next/font:
// app/layout.tsx
import { Figtree } from 'next/font/google'
const figtree = Figtree({
subsets: ['latin'],
variable: '--font-sans',
})
export default function RootLayout({ children }) {
return (
<html lang="en" className={figtree.variable}>
<body>{children}</body>
</html>
)
}Usage
import { Button, Card, Input, Label } from '@privateers/ui'
export function MyComponent() {
return (
<Card className="p-6">
<div className="space-y-4">
<div>
<Label htmlFor="email">Email</Label>
<Input id="email" type="email" placeholder="Enter your email" />
</div>
<Button>Submit</Button>
</div>
</Card>
)
}Available Components
Layout & Containers
Card,CardHeader,CardTitle,CardDescription,CardContent,CardFooter
Forms
Button- Primary actions with multiple variantsInput- Text input fieldsLabel- Form labelsCheckbox- Checkbox inputsSelect- Dropdown selections
Feedback
Badge- Status indicatorsSkeleton- Loading placeholdersSeparator- Visual dividers
Navigation
Tabs,TabsList,TabsTrigger,TabsContent
Overlays
Dialog,DialogTrigger,DialogContent,DialogHeader,DialogTitle,DialogDescriptionPopover,PopoverTrigger,PopoverContentTooltip,TooltipProvider,TooltipTrigger,TooltipContent
Button Variants
<Button variant="default">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>
<Button variant="destructive">Destructive</Button>
<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>
<Button size="icon"><Icon /></Button>Dark Mode
The design system supports dark mode via the .dark class on a parent element:
<html className="dark">
{/* Dark mode enabled */}
</html>Or toggle dynamically:
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:
import type { ButtonProps } from '@privateers/ui'
const MyButton: React.FC<ButtonProps> = (props) => {
return <Button {...props} />
}License
MIT