Components
Beautiful, accessible, and customizable components for building modern applications.
We use shadcn/ui for pre-built components built with React, Radix UI, and Tailwind CSS.
Why shadcn/ui?
Unlike traditional component libraries, shadcn/ui components are copied directly into your project, giving you:
- Full control — Style any component with Tailwind CSS via
className. - Complete customization — Modify any component to fit your needs.
- No dependency lock-in — No breaking changes from upstream updates.
Usage
All 60+ shadcn/ui components are pre-installed in packages/ui/. Import them per-component:
import { Button } from "@package/ui/button";
import { Badge } from "@package/ui/badge";
import { Card, CardContent } from "@package/ui/card";See the shadcn/ui components documentation for usage examples and API reference.
Custom Components
In addition to shadcn/ui, @package/ui includes custom components:
| Component | Description |
|---|---|
Logo | Application logo component. Used in both applications and email templates. |
PasswordInput | Password input with show/hide toggle. |
ThemeProvider | Dark/light mode provider. |
ThemeToggle | Theme switcher button. |
Styling with cn()
Use the cn() utility for conditional class names:
import { cn } from "@package/utils";
<div className={cn("flex items-center", isActive && "bg-primary")} />;