Recent-events list with semantic action icons (create, update, delete, signup) and a relative timestamp on the right.
The import and the props worth knowing about, in one place.
import { Dashboard4 } from "@/components/beste/piece/dashboard4";
<Dashboard4
surface="card"
bordered={true}
inverted={false}
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"
}
]}
/>Three-tile alert overview with semantic icons and counts for critical, warning, and info severities.
Horizontal milestone tracker with tone-filled done checks, a ringed current step, muted pending steps, and dates below.
Three concentric SVG rings with their own progress levels and a matching legend of labels, values, and units.
Target-tracking card with a target icon, current / goal values, a tone-colored progress bar, and a deadline footer.