Three-column data table with a sort arrow on the active column and monospaced right-aligned amounts in each row.
| Account | Plan | Amount |
|---|---|---|
| Atlas Labs | Scale | $820 |
| Northwind | Pro | $420 |
| Hemlock | Pro | $420 |
| Stoic & Co. | Starter | $120 |
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Dashboard28 } from "@/components/beste/piece/dashboard28";
<Dashboard28
title="Recent invoices"
accountHeader="Account"
planHeader="Plan"
amountHeader="Amount"
sortKey="Amount"
rows={[
{
"name": "Atlas Labs",
"plan": "Scale",
"amount": "$820"
},
{
"name": "Northwind",
"plan": "Pro",
"amount": "$420"
},
{
"name": "Hemlock",
"plan": "Pro",
"amount": "$420"
},
{
"name": "Stoic & Co.",
"plan": "Starter",
"amount": "$120"
}
]}
/>Three horizontally divided metric cells in one card, each with a label, value, and semantic delta arrow.
Top-three ranking card with gold, silver, and bronze medal circles next to names and monospaced scores.
Stacked rows combining a label, value, inline tone-colored sparkline, and emerald delta on the right.
Ranked list where each row's background bar fills proportionally to its value, with index and count on either end.
Service health rows with a pinging status dot, operational label, and a monospaced uptime percentage.
Two-by-two KPI grid where each cell carries a tone-tinted icon tile, label, and monospaced value.