Widget Grid

Two-by-two KPI grid where each cell carries a tone-tinted icon tile, label, and monospaced value.

Revenue$48.2K

Orders1,284

Users9.4K

Events62.1K

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use

import { Dashboard3 } from "@/components/beste/piece/dashboard3";

<Dashboard3
  widgets={[
    {
      "label": "Revenue",
      "value": "$48.2K",
      "icon": "revenue"
    },
    {
      "label": "Orders",
      "value": "1,284",
      "icon": "orders"
    },
    {
      "label": "Users",
      "value": "9.4K",
      "icon": "users"
    },
    {
      "label": "Events",
      "value": "62.1K",
      "icon": "signals"
    }
  ]}
  tone="violet"
/>