# Dashboard Widget Grid

Executive panel with customizable KPIs, interactive traffic charts and a live audit log.

- id: `dashboard-widget-grid`
- Page: https://agentic-ui-kit.com/components/dashboard-widget-grid
- Live preview: https://agentic-ui-kit.com/live/component/dashboard-widget-grid

## Install

```bash
agentic-ui add dashboard-widget-grid
npx shadcn@4.17.0 add @agentic-ui/dashboard-widget-grid
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** widget-drag-reorder, widget-resize-grid, layout-persistence, widget-catalog-browser, accessible-keyboard-navigation, resizable-split-panels, responsive-grid-reflow, empty-and-error-states
- **Intents:** configure, monitor-live, manage-collection
- **Suits domains:** analytics, operations, saas, devtools, finance
- **Interaction:** drag-and-drop, resize-column, toggle-collapse, add-widget-dialog, preset-selector, keyboard-reorder
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Executive panel with customizable KPIs, interactive traffic charts and a live audit log, Operations and infrastructure console with drag-and-drop reordering of status and alert cards, Interactive dashboard builder with persistent layout saving and a resizable panel comparator
- **Avoid when:** Linear data entry forms or continuous text documents without a widget structure
- **Preserve when adapting:** grid-reorder-engine, layout-persistence-contract, resize-snap-system, keyboard-accessibility
- **Replace when adapting:** widget-library-catalog, data-sources, visual-themes, default-presets
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, button, card, dialog
- **npm dependencies:** @dnd-kit/core, @dnd-kit/sortable, @dnd-kit/utilities, react-resizable-panels, lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** @dnd-kit/core@6.3.1, @dnd-kit/sortable@10.0.0, @dnd-kit/utilities@3.2.2, lucide-react@0.577.0, react-resizable-panels@^4.5.6
- **Registry dependencies:** lib-primitives