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 |
New here? Read the installation guide.
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.
Ranked list where each row's background bar fills proportionally to its value, with index and count on either end.
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.