Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

CRUD blocks

Pro

Dashboard Widgets CRUD Block for React Aria

An analytics tool's home layout editor: reorder widgets, set Small, Medium or Large, show or hide each, add from a library popover and watch a drawn four-column layout redraw, with Undo for every change.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Edit what a home dashboard shows and see the result as you go with this widget layout editor for React with React Aria. The widgets on the dashboard are rows with a name, a size of Small, Medium or Large, a Show switch and Move earlier, Move later and Remove buttons. Beside them a drawn four-column layout is rebuilt from the list on every change: greyscale boxes whose widths follow the sizes and whose order follows the rows, packed row by row, with the same facts in words, such as "5 widgets in 2 rows". Add a widget is the one Shine Button and opens a Popover of the library widgets not yet on the dashboard; Remove sends a widget back to the library. Every move, resize, hide, add and remove leaves a line in the foot with Undo, and focus follows the widget. For home pages, overview screens and any layout a person arranges.

FAQ

How do I use my own widgets?

Edit START: each widget has an id, a name, a size (s, m or l), shown and here, which says whether it is on the dashboard or waiting in the library. The order of the array is the order on the dashboard.

How is the drawn layout packed?

rowsOf takes the shown widgets in order and fills rows of four columns: Small takes one, Medium two and Large all four. A widget that doesn't fit in the rest of a row starts the next row. It never backfills a gap, so the drawing matches what a simple grid renders.

How do I reorder without a mouse?

Move earlier and Move later are buttons on every row, so the order is changed with Tab and Enter. Focus stays on the button you pressed, so it can be pressed again; at the first or last place the button is aria-disabled and says so in the foot.

What is the difference between hiding and removing?

Hiding keeps the widget on the dashboard list, so it keeps its place and size, and takes it out of the drawing. Removing returns it to the library, and adding it again puts it at the end of the dashboard.

What stays local, and how do I save the layout?

The list lives in state in this tab; a reload brings the first layout back. In your app save here, shown, size and the order from change, which every edit goes through, and make Undo write the previous snapshot.

How does it look on a phone?

The drawn layout comes first, then the widget list, one column. Each row wraps its size choices and the Show switch under the name, and both areas keep a fixed height with their own scroll.

All 100 crud blocks