Blocks

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

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

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