shadcn.io is not affiliated with official shadcn/ui
Quick Actions Dashboard Block for React Aria
A 4 by 2 grid of pinned actions with letter keys that run them, an Edit toggle that adds Earlier, Later and Unpin to each tile, and a searchable library to pin from, up to eight.
Installation
Overview
Put the actions you use most on one screen and run them from the keyboard, with this quick actions panel for React with React Aria. A hairline frame with a plus mark on each corner holds a 4 by 2 grid of pinned actions on shared hairlines, each a tile with an icon, its name and the letter that runs it as a Kbd. Pressing a tile, or its letter while focus is inside the panel, says what it did in a polite line ("New project: opened in this demo"). The header's Toggle, Edit, turns every tile into an edit tile with Earlier, Later and Unpin buttons and switches on the library underneath: a searchable list of the actions not pinned, each with a Pin button that stops at eight ("Home is full, unpin one"). Empty places are drawn as empty places, so the grid never changes size. It's built from Toggle, Kbd, Input, Button and Guides. For home screens, dashboards and launchers.
FAQ
How do I fill it with my actions?
Edit ACTIONS for everything that can be pinned (an id, a label and a unique letter), START for what is pinned when the page opens, and CAPACITY for the number of places. Give each action an icon in ActionIcon. The grid's cells, the library and the counts are worked out from those.
How do the letter keys work?
While focus is inside the panel and Edit is off, pressing a pinned action's letter runs it. The listener is on the panel, not the page, so it never takes a key from the rest of your app, and it ignores anything typed in the search field and any key held with Ctrl, Alt or Command. Each tile also says its letter to a screen reader. Edit mode turns the letters off, so searching and arranging never run anything.
How do I rearrange and unpin?
Turn on Edit. Each tile gets Earlier and Later, which swap it with its neighbour and keep focus on the button you pressed, and Unpin, which frees the place and moves focus to the tile that took it. The first tile's Earlier and the last one's Later answer "already first" or "already last" instead of going dead.
What stays local, and how do I wire it for real?
The pins live in the page and no action opens anything. To make it real, store each person's pinned list on the server, make each action navigate or run its command, and keep letters unique per list. Keep the "full" message: it tells a keyboard user why Pin did nothing.
Is it accessible?
Every tile is a button named by its action; the edit buttons say which tile they move ("Move New project earlier"). The library's Pin buttons name their action too. In view mode they are present but answer "Turn on Edit to pin" rather than disappearing. The library is a named scroll region you can reach by keyboard.