kleradesign

dashboard

DESIGN.md
overview
foundations
forms
dashboard
  • hero header
  • section header
  • stat card
  • status card
  • portal card
  • portal card list
  • offer card
  • status row
  • data table
  • empty state
  • loading skeleton
  • badge
  • toolbar
  • tabs
layout
patterns

canonical rules in kleraOS/DESIGN.md.

dashboard

dashboard primitives that compose the patient, provider, and hq surfaces. the patient portal today is a directional sketch — the targets defined here are the polished version every surface should land at.

phase 4 builds these in packages/ui/components/dashboard/ and demos each one here with all variants and props.

  • hero headerpage title + meta + optional action.
  • section headersection title + optional action link.
  • stat cardsingle metric: label, big number, optional delta.
  • status cardleft-border state indicator card.
  • portal cardthe 560px tile with header + body. canonical container for everything else.
  • portal card listkey/value rows inside a portal card. for static record data.
  • status rowhorizontal row: title, badge, timestamp. for activity / queue items.
  • data tablewide multi-column tabular data with sortable columns.
  • empty stateillustration + heading + body + cta.
  • loading skeletonshimmer placeholders for cards/rows/tables.
  • badgetone-aware status pill.
  • toolbarsearch + filter chips + sort, above any list.
  • tabsin-page tab switcher for multi-view sections.

klera design language · v0.1 · 22 components · registry at packages/ui/registry.json