UI Components
BunShip Pro includes 26 pre-installed shadcn/ui components built on Radix UI primitives and styled with Tailwind CSS v4.
Available Components
All components are in packages/ui/src/components/ and exported from @bunship/ui:
Layout & Structure
| Component | What It Does |
|---|
Card | Container with header, content, and footer slots |
Separator | Horizontal or vertical divider line |
ScrollArea | Custom scrollbar container |
Sheet | Slide-out panel from the edge of the screen |
Tabs | Tabbed content switcher |
Accordion | Collapsible content sections |
| Component | What It Does |
|---|
Button | Primary action element with variants (default, secondary, outline, ghost, destructive) |
Input | Text input field |
Textarea | Multi-line text input |
Checkbox | Boolean toggle with a checkmark |
Switch | Boolean toggle with a sliding track |
Label | Accessible form field label |
Data Display
| Component | What It Does |
|---|
Table | Data table with header, body, rows, and cells |
Badge | Small status label with variants (default, secondary, destructive, outline, success, warning) |
Avatar | User profile image with fallback initials |
Skeleton | Loading placeholder with shimmer animation |
Alert | Highlighted message box for info, warnings, errors |
Tooltip | Hover popup with additional context |
Overlays & Feedback
| Component | What It Does |
|---|
Dialog | Modal dialog with title, description, and actions |
DropdownMenu | Context menu triggered by a button |
Sonner | Toast notification system |
Marketing
| Component | What It Does |
|---|
FeatureCard | Feature highlight card for landing pages |
PricingCard | Pricing plan card with feature list |
TestimonialCard | Customer quote card |
StatsSection | Key metrics display |
FaqSection | FAQ accordion section |
Using Components
Import from @bunship/ui:
import { Button, Input, Table, TableHeader, TableBody, TableRow, TableCell } from "@bunship/ui";
cn() utility for merging class names is also exported:
import { cn } from "@bunship/ui";
<div className={cn("text-sm", isActive && "font-bold")}>Content</div>;
Adding New Components
Use the shadcn CLI to add components from the shadcn/ui registry:
cd packages/ui
bunx shadcn@latest add select
packages/ui/src/components/. Then export it from the package’s index.ts so it’s available across the monorepo:
// packages/ui/src/index.ts
export * from "./components/select";
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@bunship/ui";
Design Conventions
BunShip Pro follows these patterns across all pages:
| Pattern | Implementation |
|---|
| Section headers | text-xs font-medium uppercase tracking-wider text-muted-foreground |
| Data values | text-2xl font-semibold (Inter/sans, not monospace) |
| Data tables | Table / TableHeader / TableBody / TableRow / TableCell from @bunship/ui |
| Small labels | font-mono text-[11px] uppercase tracking-widest |
| Action buttons in tables | Button variant="ghost" size="sm" |
| Flat layouts | No cards wrapping content sections — use bg-muted/30 backgrounds with rounded-lg |
| Status indicators | Colored dots (bg-green-500, bg-red-500) not badges for active/inactive states |
The dashboard uses flat, data-dense layouts inspired by Railway.app — typography hierarchy and
subtle backgrounds instead of bordered cards.
Next Steps
