shadcn.io is not affiliated with official shadcn/ui
Widget Gallery Carousel Block for Ark UI
A dashboard with an Add widget sheet drawn open in place, holding a carousel of eight widget previews with their type and size; adding one puts a new tile on the drawn dashboard and the count goes up.
Installation
Overview
Pick a dashboard widget from a gallery in a side sheet, with this widget gallery carousel for React with Ark UI. Widgetwell, a dashboard builder, shows a Dashboard whose header says how many of the eight widgets are on it and holds the real "Add widget" trigger. On load the sheet is drawn open in place over a drawing of the dashboard, so the preview shows it without a click. Inside, a carousel of eight widget previews (a revenue chart, an orders table, a visitors counter, a task list, a region map, an uptime strip, a checkout funnel and a launch calendar), each drawn as a miniature with its type, its size and one line, one in view with the next peeking. The sheet's foot holds the one primary, a Shine Button "Add Region map". Adding puts a new tile on the drawn dashboard and raises the count; a widget already there says so and cannot be added twice. Pressing Add widget opens the real Sheet, which follows the page's reading direction. The product and widgets are made up.
FAQ
How do I use my own widgets?
Edit WIDGETS and START. A widget has an id, a name, a type, a size (Small, Medium or Large, which sets how many columns its tile takes), one line and a look: lines of tone x y width height radius in a 120 by 72 box. START lists the tiles already on the dashboard.
Why is the sheet already open?
So a preview shows the feature without a click. The in-place copy is a native non-modal dialog drawn over the dashboard. The header's Add widget opens the real Sheet with a focus trap and Escape, and focus returns to the button. In your app keep the Sheet and delete the in-place copy.
What does Add do?
It adds a tile for the widget in view to the drawn dashboard behind the sheet, raises "Widgets 5 of 8" in the header and says "Added Region map in this demo" in the one polite status line. A widget already on the dashboard shows "is on your dashboard" and its button is marked unavailable.
How does it work with a keyboard?
Tab reaches Add widget, then inside the sheet the previews' Previous and Next, Cancel, Add and Close. With focus in the carousel the arrow keys move one widget (mirrored in a right-to-left layout) and Home and End jump to the ends. Escape closes the sheet. The carousel's page is controlled by the block.