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