Ledger
Deviations-style bar ledger with total and actions.
- UNCITED FIGURE78
- SILENT CONFLICT77
- SCOPE BREACH85
- FORMAT DRIFT90
- GHOST WRITE58
- PENDING REVIEW64
Source
"use client"
import type { Tone } from "@/registry/warren/lib/tone"
import { Ledger, type LedgerItem } from "@/registry/warren/ledger/ledger"
const items: LedgerItem[] = [
{ label: "UNCITED FIGURE", count: 78, tone: "danger" as Tone },
{ label: "SILENT CONFLICT", count: 77, tone: "warning" as Tone },
{ label: "SCOPE BREACH", count: 85, tone: "accent" as Tone },
{ label: "FORMAT DRIFT", count: 90, tone: "teal" as Tone },
{ label: "GHOST WRITE", count: 58, tone: "success" as Tone },
{ label: "PENDING REVIEW", count: 64, tone: "muted" as Tone },
]
export default function LedgerDemo() {
return (
<Ledger
items={items}
total={452}
heading="DEVIATION LEDGER"
totalLabel="TOTAL OPEN"
actions={
<span className="border-2 border-border px-1.5 py-0.5 font-mono text-[10px] font-bold uppercase tracking-wide text-foreground">
SWEEP 06:15
</span>
}
footer="UPDATED 20 AUG 06:00 UTC · NEXT SWEEP 06:15"
/>
)
}
Installation
npx shadcn@latest add https://warren.eduard3v.com/r/ledger.jsonUsage
import { Ledger } from "@/components/ui/ledger"<Ledger items={items} total={452} heading="DEVIATION LEDGER" />Total
The total renders as the big mono red display numeral — the loudest element on the panel, set in
text-danger-text. heading titles the panel; when both are set, totalLabel appears as the
uppercase caption above the total (e.g. TOTAL OPEN). With no heading, the panel falls back to
the literal Ledger title.
Rows
Each item draws a 10px uppercase label with a mono count on the right, then a h-1.5 track with a
solid tone fill scaled to the row's share of the max count — no opacity wash, no rounding, no
transition. Item counts always use tabular mono figures.
Tones
Rows take the shared tone vocabulary: primary · success · danger · warning · accent ·
teal · muted. The tone drives the track fill only; label and count stay in the muted/foreground
text grades.
Header & Footer
actions sits on the header row's right side (e.g. a sweep-time chip). footer is an optional 10px
uppercase strip under a 1px ink hairline (border-border) at the panel's base.
API Reference
Prop
Type
LedgerItem
Prop
Type