Action Panel React component
A stack of action panels for an account page, each a title, a sentence and one action that really works: export with progress and a JSON download, two-step verification with recovery codes to copy, an inline billing email change, ownership transfer with a warning step, and leave workspace behind a typed confirmation.
About the Action Panel component
Action Panel is the pattern for account and workspace pages where each card does one thing: a title, a sentence that explains it, and a single action. This block stacks five of them, and every one works: exporting data, turning on two-step verification, changing the billing email, transferring ownership and leaving the workspace.
Each action unfolds only what it needs, right inside its card: a progress bar and a download link, recovery codes to copy, an inline email field, a warning before handing over ownership, and a typed confirmation before leaving. Results are confirmed in the card's own sentence.
When to use it
Use it on account, security, billing and workspace settings pages, or anywhere a few important one-off actions live.
Order panels from everyday to dangerous and keep destructive actions last with a red border.
Installation
Add the Action Panel component to your project with the shadcn CLI. It lands in components/action-panel.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/action-panelOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<ActionPanel /> accepts 9 props, all optional.
| Prop | Type | Default |
|---|---|---|
| billingEmail | string | "billing@nexora.io" |
| members | string[] | ["Daniel Reyes", "Lena Brandt", "Tomás Ferreira"] |
| workspace | string | "Nexora" |
| onExport | () => Promise<object> | object | — |
| onEmailChange | (email: string) => void | — |
| onTransfer | (member: string) => void | — |
| onLeave | () => void | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- billingEmailstringDefault: "billing@nexora.io"
- membersstring[]Default: ["Daniel Reyes", "Lena Brandt", "Tomás Ferreira"]
- workspacestringDefault: "Nexora"
- onExport() => Promise<object> | object
- onEmailChange(email: string) => void
- onTransfer(member: string) => void
- onLeave() => void
- theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Action Panel FAQ
- Is the export real?
- Yes. It builds a JSON file in the browser and gives a download link. Pass onExport to return your own data, or replace the link with a URL from your server for large exports.
- Where do the recovery codes come from?
- The demo shows fixed codes. Generate real ones on your server when two-step verification is turned on and pass them in.
- How are risky actions protected?
- Transfer asks for confirmation in a warning box that focuses Cancel first, and Leave stays disabled until LEAVE is typed exactly. Leaving can be undone from the same card in the demo.
- Can I use just one panel?
- Yes. Each panel is built with the same small helper; keep the ones you need and remove the rest.
- Is it accessible?
- Each panel is a section labelled by its title, the 2FA control is a switch, inputs have labels and aria-invalid, the export progress is a progressbar, the transfer warning is an alertdialog and saved states are announced.
