---
title: "Dashboard grid"
description: "A shop overview you arrange yourself: six mixed cards on a 12-column grid, with Customise to drag, resize, remove and add them back."
plan: Pro
docs: https://ui.edbn.me/docs/blocks/dashboard-grid
---

# Dashboard grid

A shop overview you arrange yourself: six mixed cards on a 12-column grid, with Customise to drag, resize, remove and add them back.

Loam Studio's overview on a 12-column grid: revenue for the last 14 days, today's orders by hour and by stage, the week's classes and places booked, low stock, top products and the latest reviews. Each card is small, medium or large (3, 6 or 12 columns) and lays out its contents for the width it gets. Between 768 and 1024px a small card takes half the row and the others all of it; on a phone, one column. Customise turns on editing. Every card gets a drag handle and a menu with its size, Move earlier, Move later and Remove; Add card brings removed cards back at the end, Reset layout returns to the default, Done keeps the changes and Cancel drops them. Card contents sit still while you edit. Drag a card by mouse anywhere on it, or by its handle on touch and from the keyboard (Space, then the arrow keys to move it a place earlier or later, Home and End for the ends). The cards reflow at their real sizes as you go, every move is announced, and Escape puts the card back. Under reduced motion nothing slides. The layout and onLayoutChange props keep the arrangement in your own state, and defaultLayout sets what Reset layout returns to. Uses @dnd-kit/core and @dnd-kit/sortable, and the Chart component for the revenue and orders charts.

A Pro block built on Base UI and Tailwind CSS v4.

## Installation

This is a Pro item. Once per project, create a token at https://ui.edbn.me/dashboard/tokens, put it in `.env.local` as `EDBN_TOKEN`, and add the registry to `components.json`:

```json
{
  "registries": {
    "@edbn": {
      "url": "https://ui.edbn.me/r/{name}.json",
      "headers": { "Authorization": "Bearer ${EDBN_TOKEN}" }
    }
  }
}
```

Then install:

```bash
npx shadcn@4.19.0 add @edbn/dashboard-grid
```

## Dependencies
- npm: lucide-react@^1.33.0, @dnd-kit/core@^6.3.1, @dnd-kit/sortable@^10.0.0, @dnd-kit/utilities@^3.2.2, recharts@^3.8.0
- edbn: edbn-base, aspect-ratio, avatar, button, card, chart, dropdown-menu, meter, text-link

## Source

The source is part of Pro (https://ui.edbn.me/pricing). The install above adds it to the project, ready to edit.

## More dashboards blocks

All 13, with install commands: https://ui.edbn.me/docs/blocks/dashboards (Markdown: https://ui.edbn.me/docs/blocks/dashboards.md)

## For agents
- Base theme, once per project: npx shadcn@4.19.0 add https://ui.edbn.me/r/edbn-base.json
- MCP server with search, items, examples and source: https://ui.edbn.me/mcp
- Every page and item: https://ui.edbn.me/llms.txt