Quick Actions Grid React component
A grid of shortcut tiles for a dashboard home: coloured icons with a hover glow and a ripple when pressed, number keys 1–9 to run them, a filter, a Recent row, and an Edit mode where tiles wiggle, can be removed and new ones added from a library.
About the Quick Actions Grid component
Quick Actions Grid gives a dashboard home a set of big, friendly shortcuts: new project, invite a teammate, create an invoice, import a file and so on. Each tile has its own colour, glows softly on hover and ripples when pressed, and the ones you used last appear in a Recent row.
Power users can run the first nine with the number keys. Press Edit and the tiles wiggle like a phone home screen: remove the ones you never use and add others from the library, and the grid rearranges itself smoothly.
When to use it
Use it on a dashboard or workspace home, an empty state for new accounts, or an admin landing page.
Pin six to eight actions; route each id to a page, modal or API call in onAction.
Installation
Add the Quick Actions Grid component to your project with the shadcn CLI. It lands in components/quick-actions-grid.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/quick-actions-gridOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<QuickActionsGrid /> accepts 7 props, all optional.
| Prop | Type | Default |
|---|---|---|
| title | string | "Quick actions" |
| library Every action people can pin. | { id: string; label: string; description?: string; icon: ActionIcon; color?: string }[] | DEFAULT_LIBRARY |
| pinned Ids pinned to the grid, in order. | string[] | ["project", "invite", "invoice", "import", "schedule", "connect", "report", "ticket"] |
| onAction | (id: string) => void | — |
| onPinnedChange | (ids: string[]) => void | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- titlestringDefault: "Quick actions"
- library
Every action people can pin.
{ id: string; label: string; description?: string; icon: ActionIcon; color?: string }[]Default: DEFAULT_LIBRARY - pinned
Ids pinned to the grid, in order.
string[]Default: ["project", "invite", "invoice", "import", "schedule", "connect", "report", "ticket"] - onAction(id: string) => void
- onPinnedChange(ids: string[]) => void
- theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Quick Actions Grid FAQ
- How do the keyboard shortcuts work?
- While focus is anywhere inside the card, pressing 1 to 9 runs the matching tile. Typing in the filter or using Ctrl, Cmd or Alt does not trigger them.
- Can people customise the grid?
- Yes. Edit mode lets them remove tiles and add any action from the library. The new order is passed to onPinnedChange so you can save it.
- Can I add my own icons?
- The block ships twelve line icons. Add more by extending the ICONS map with your own path and using its key as the icon.
- What does pressing a tile do?
- It plays the ripple, adds the action to Recent, shows a short toast and calls onAction with the id. Put your navigation or modal logic there.
- Is it accessible?
- Tiles are buttons with aria-keyshortcuts, Edit is a toggle button, remove and add buttons are named after the action, toasts are announced and the wiggle and ripple are turned off for reduced motion.
