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

Forms & Inputs

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";

Components follow shadcn/ui conventions. The 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

This generates the component file in 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";

After adding, you can import it anywhere:

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

Adding Pages — Create new pages using these components
Theming & Branding — Customize component colors and fonts

​UI Components

​Available Components

​Layout & Structure

​Forms & Inputs

​Data Display

​Overlays & Feedback

​Marketing

​Using Components

​Adding New Components

​Design Conventions

​Next Steps

UI Components

Available Components

Layout & Structure

Forms & Inputs

Data Display

Overlays & Feedback

Marketing

Using Components

Adding New Components

Design Conventions

Next Steps