# Blocks

> Full-section product blocks — sidebars, modals, dashboards, layouts.

Blocks are the largest pieces in `@otfdashkit/ui`. They're full sections (or full layouts)
designed to slot into a real product. The kits use them as starting points and customize
the bits that need customizing.

## App shells

| Block                          | What it is                                                                              |
| ------------------------------ | --------------------------------------------------------------------------------------- |
| `SidebarLayoutDashboard`       | Sidebar nav + top bar + main. The dashboard kit's default shell.                        |
| `SidebarLayoutGroups`          | Sidebar with collapsible group headers — taller nav trees                              |
| `SidebarLayoutMinimal`         | Sidebar with icons-only at narrow widths, full at wide                                  |
| `SidebarLayoutSearch`          | Sidebar with persistent ⌘K-anchor + recent items                                        |
| `SidebarLayoutUser`            | Sidebar emphasising user/profile entry points                                            |
| `StackedLayoutBranded`         | Top-nav + breadcrumb + main. For marketing-shaped product areas.                        |
| `StackedLayoutTabs`            | Top-nav + secondary tab strip                                                            |

```tsx
import { SidebarLayoutDashboard } from '@otfdashkit/ui'

export default function App() {
  return (
    <SidebarLayoutDashboard
      sidebar={<MySidebar />}
      header={<MyHeader />}
    >
      <DashboardContent />
    </SidebarLayoutDashboard>
  )
}
```

## Modals

| Block                          | What it is                                                                  |
| ------------------------------ | --------------------------------------------------------------------------- |
| `FeedbackModal`                | "How are we doing?" with rating + free-text + screenshot upload             |
| `InviteModal`                  | Invite teammates by email, set role per invite                              |
| `ManageTagsModal`              | Add / rename / delete tags with color picker                                |
| `SelectUsersModal`             | Multi-select user picker (typeahead + checked state)                        |

## Dashboard widgets

| Block                          | What it is                                                                  |
| ------------------------------ | --------------------------------------------------------------------------- |
| `MetricCard`                   | KPI card with sparkline, delta, optional trend arrow                        |
| `BarList`                      | Top-N list with horizontal bars (Cal Newport's "BarList" pattern)           |
| `ActivityHeatmap`              | GitHub-style activity grid                                                  |
| `TaskCard`                     | Single task tile (status, assignee, due date, priority)                     |
| `SortableTaskList`             | Drag-orderable task list with priority grouping                             |
| `MessagesCard`                 | Recent-messages widget with avatars + relative time                         |

```tsx
import { MetricCard, BarList } from '@otfdashkit/ui'

<div className="grid grid-cols-2 gap-4">
  <MetricCard
    label="Revenue"
    value="$48.2K"
    delta="+12%"
    trend="up"
    series={revenueSeries}
  />
  <BarList
    title="Top referrers"
    items={[
      { name: 'Hacker News', value: 4220 },
      { name: 'Twitter',     value: 2180 },
      { name: 'Reddit',      value: 1450 },
    ]}
  />
</div>
```

## Files / chat / collab

| Block                          | What it is                                                                  |
| ------------------------------ | --------------------------------------------------------------------------- |
| `FileCards`                    | Grid of file cards with thumbnail, type badge, owner avatar                 |
| `FilesList`                    | List variant of the same                                                    |
| `ChatDetail`                   | Two-pane chat view — list + open thread                                     |
| `WorkspaceMembers`             | Members table with role pickers + remove action                              |

## Settings + permissions

| Block                          | What it is                                                                  |
| ------------------------------ | --------------------------------------------------------------------------- |
| `NotificationSettings`         | Categorised notification toggles                                            |
| `OrganizationMenu`             | Workspace switcher dropdown                                                 |
| `RolesMenu`                    | Role assignment menu (Owner / Admin / Member / Guest)                       |
| `UserMenu`                     | User dropdown (avatar trigger → profile / settings / sign out)              |
| `IntegrationCard`              | Connect / disconnect a third-party (icon + status + CTA)                    |

## Floating actions

| Block                          | What it is                                                                  |
| ------------------------------ | --------------------------------------------------------------------------- |
| `FloatingActionButton`         | Bottom-right circular FAB with optional dropdown of secondary actions       |

## See also

- [Composite](/docs/components/ui/composite) — single-purpose finished components
- [Advanced](/docs/components/ui/advanced) — Kanban / Gantt / CommandBar / Filters