Dashboard

Dashboard blocks

Higher-level compositions that slot into any admin surface. Ship the chrome of your back-office in minutes.

The shell

DashboardShell is the outermost container. It takes a sidebar and a topBar as slots and renders your page content in the main area.

app/admin.tsx

import { DashboardShell, Sidebar, TopBar } from '@kana-consultant/ui-kit'
import { LayoutDashboard, ListTodo, Users } from 'lucide-react'

const nav = [
  { id: 'dashboard', label: 'Dashboard', icon: LayoutDashboard },
  { id: 'tasks', label: 'Tasks', icon: ListTodo, badge: 12 },
  { id: 'team', label: 'Team', icon: Users },
]

export function AdminApp() {
  return (
    <DashboardShell
      sidebar={<Sidebar items={nav} activeId='dashboard' />}
      topBar={<TopBar title='Dashboard' user={{ name: 'Priya Patel' }} />}
    >
      {/* your page content */}
    </DashboardShell>
  )
}

Block reference

DashboardShell

Sidebar + TopBar layout wrapper.

Sidebar

Grouped nav items, badges, active state, footer slot.

TopBar

Title/subtitle, search, notifications, theme toggle, user avatar.

ThemeToggle

Wired to the theme store out of the box.

StatCard

Label, value, icon, delta indicator. For KPI rows.

TaskCard

Record card with checkbox, priority, assignees, subtasks, comments.

TaskList

Stack of TaskCards with empty-state fallback.

ProjectCard

Color bar, progress, member group — generic "collection" card.

TeamMemberCard

User/entity card with online badge.

ActivityFeed

Timeline with avatar rail — audit logs, change history.

CalendarMini

Month grid with markers and selection.

KanbanColumn

Column header + stacked cards for pipeline / workflow views.

Shared types and enums

Blocks share a small set of types and const-enums:

EPriority — Low | Medium | High | Urgent
EStatus — Backlog | Todo | InProgress | Review | Done
TTask, TProject, TMember, TStat, TNavItem, TActivity

They're shaped for a task-management domain but are generic enough to cover most CRUD / collection-style surfaces — relabel and go.