Recent-events list with semantic action icons (create, update, delete, signup) and a relative timestamp on the right.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Dashboard4 } from "@/components/beste/piece/dashboard4";
<Dashboard4
headerLabel="Activity"
events={[
{
"type": "signup",
"actor": "Ada Lovelace",
"action": "joined",
"time": "2m"
},
{
"type": "create",
"actor": "Marcus R.",
"action": "created Project Orion",
"time": "14m"
},
{
"type": "update",
"actor": "Priya S.",
"action": "edited Onboarding doc",
"time": "1h"
},
{
"type": "delete",
"actor": "Tomás L.",
"action": "archived Q1 specs",
"time": "3h"
}
]}
/>Single-metric card with a large value, semantic delta pill that flips emerald for gains and rose for losses, and a comparison period.
Compact metric card with a large value, delta percentage, and an SVG sparkline with a tone-colored stroke and faint area fill.
Two-by-two KPI grid where each cell carries a tone-tinted icon tile, label, and monospaced value.
Ranked list where each row's background bar fills proportionally to its value, with index and count on either end.
Conversion funnel stages where each row's bar narrows against the top stage and a rose drop-off percentage marks churn.
Dashboard filter bar with a primary date-range button, a comparison-period dropdown, and a segment filter toggle.