Components / Application

Widgets

The dashboard kit. Stat is the headline KPI tile; Widget is the panel shell, with a reusable WidgetListItem row and a WidgetGrid layout. The same row powers deadlines, approvals, arrears, and portfolio health — change the data, not the markup. See it all composed on the manager dashboard preview.

Installation

bash

npx shadcn add https://raw.githubusercontent.com/levi-putna/elements/main/registry/widget/registry.json
npx shadcn add https://raw.githubusercontent.com/levi-putna/elements/main/registry/stat/registry.json

Stat — KPI strip

A headline number with a label, tinted icon chip, trend delta, and caption. Tone colours the icon chip only — the surface stays white, per the brand. Set sentiment when a falling number is good (arrears down is positive).

StatGroup · four portfolio KPIs

Needs attention

3 today

Levy arrears

$84.2k

4%across 37 lots

Statutory deadlines

1 overdue · 30 days

Open maintenance

2 emergency

tsx

import { Stat, StatGroup } from "@/components/ui/stat"
import { Receipt } from "lucide-react"

<StatGroup columns={4}>
  <Stat
    label="Levy arrears"
    value="$84.2k"
    icon={Receipt}
    tone="warning"
    delta={{ value: "4%", direction: "down", sentiment: "positive" }}
    caption="across 37 lots"
    href="/levies"
  />
</StatGroup>

Widget — panel + list

A bordered panel with a header (title, count, trailing action), a flush list body, and an optional footer. WidgetListItem renders leading icon · title + meta · trailing.

Widget · upcoming deadlines

Upcoming deadlines4

Calendar

Strata Hub annual return

Northbridge Estate · SP 4821

StatutoryOverdue 3 days

Fire safety statement (AFSS)

Harbour View Towers · SP 1042

StatutoryDue in 9 days

Annual General Meeting

Parkside Residences · SP 2287

StatutoryNotice due in 14 days

Building insurance renewal

The Quarter · SP 3390

RenewalDue in 26 days

Statutory dates carry legal deadlines — never let one slip.

tsx

import {
  Widget, WidgetHeader, WidgetTitle, WidgetAction,
  WidgetContent, WidgetList, WidgetListItem,
} from "@/components/ui/widget"
import { CalendarClock, ShieldCheck } from "lucide-react"

<Widget>
  <WidgetHeader>
    <WidgetTitle icon={CalendarClock}>Upcoming deadlines</WidgetTitle>
    <WidgetAction href="/calendar">Calendar</WidgetAction>
  </WidgetHeader>
  <WidgetContent flush>
    <WidgetList>
      <WidgetListItem
        icon={ShieldCheck}
        iconTone="warning"
        title="Fire safety statement (AFSS)"
        meta="Harbour View Towers · SP 1042"
        href="/compliance"
        trailing={<span className="text-xs text-ink-muted">Due in 9 days</span>}
      />
    </WidgetList>
  </WidgetContent>
</Widget>

WidgetGrid — dashboard layout

A responsive grid. With columns={3}, wrap the main panels in a lg:col-span-2 column and the side panels in the third.

tsx

import { WidgetGrid, Widget } from "@/components/ui/widget"

<WidgetGrid columns={3}>
  <div className="space-y-4 lg:col-span-2">
    <Widget>{/* main panel */}</Widget>
  </div>
  <div className="space-y-4">
    <Widget>{/* side panel */}</Widget>
  </div>
</WidgetGrid>

Stat props

Prop	Type	Default	Description
label	string	-	Short metric name, e.g. "Levy arrears".
value	ReactNode	-	The headline value. String, or a node for split/currency values.
icon	LucideIcon	-	Optional leading icon shown in a tinted chip.
tone	"default" \| "accent" \| "warning" \| "danger" \| "info"	"default"	Colour signal for the icon chip. The card surface stays white.
delta	{ value: string; direction: "up" \| "down" \| "flat"; sentiment?: "positive" \| "negative" \| "neutral" }	-	Trend pill under the value. Sentiment defaults to up=positive / down=negative — override when a falling number is good.
caption	string	-	Supporting text after the delta, e.g. "vs last month".
href	string	-	When set, the whole tile becomes a link.

StatGroup props

Prop	Type	Default	Description
columns	2 \| 3 \| 4	4	Columns at the largest breakpoint. Collapses to one column on mobile.

Widget props

Prop	Type	Default	Description
tone	"default" \| "muted"	"default"	Surface colour. default = white, muted = off-white for alternation.

WidgetTitle props

Prop	Type	Default	Description
icon	LucideIcon	-	Optional leading icon.
count	number	-	Optional count chip after the title (e.g. open item count).
as	"h2" \| "h3"	"h3"	Heading level.

WidgetContent props

Prop	Type	Default	Description
flush	boolean	false	Remove padding so an edge-to-edge list sits flush with the border.

WidgetListItem props

Prop	Type	Default	Description
icon	LucideIcon	-	Leading icon shown in a tinted chip.
iconTone	"default" \| "accent" \| "warning" \| "danger" \| "info"	"default"	Colour of the leading icon chip.
title	ReactNode	-	Primary line (truncates).
meta	ReactNode	-	Secondary metadata line — scheme, plan, dates (truncates).
trailing	ReactNode	-	Trailing content: a badge, value, status indicator, or stack. Right-aligned.
href	string	-	Makes the whole row a link with a hover state and chevron.
showChevron	boolean	-	Force the trailing chevron. Implied when href is set.