> ## Documentation Index
> Fetch the complete documentation index at: https://docs.bunship.com/llms.txt
> Use this file to discover all available pages before exploring further.

# UI Components

> Available shadcn/ui components, how to use them, and how to add more.

# UI Components

BunShip Pro includes 26 pre-installed [shadcn/ui](https://ui.shadcn.com) components built on [Radix UI](https://www.radix-ui.com/) 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`:

```tsx theme={null}
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:

```tsx theme={null}
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](https://ui.shadcn.com/docs/components):

```bash theme={null}
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:

```tsx theme={null}
// packages/ui/src/index.ts
export * from "./components/select";
```

After adding, you can import it anywhere:

```tsx theme={null}
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    |

<Note>
  The dashboard uses flat, data-dense layouts inspired by Railway.app — typography hierarchy and
  subtle backgrounds instead of bordered cards.
</Note>

## Next Steps

* [Adding Pages](/pro/adding-pages) — Create new pages using these components
* [Theming & Branding](/pro/theming) — Customize component colors and fonts