Back to components
ComponentAI & ChatFree
Next Best Action Card React component
A focused suggestion card with contextual reasoning, async actions, set-aside and dismiss controls, undo and completion states.
About the Next Best Action Card component
A focused suggestion card with contextual reasoning, async actions, set-aside and dismiss controls, undo and completion states.
When to use it
Present a small, explainable queue of useful follow-up actions.
Let users choose whether to act, set aside or dismiss a suggestion.
Installation
Add the Next Best Action Card component to your project with the shadcn CLI. It lands in components/next-best-action-card.tsx as plain React + Tailwind CSS source you own and can edit.
Install
Copied!
npx shadcn@latest add @reactframe/next-best-action-cardOr copy the source by hand and install its dependencies:
Install
Copied!
npm install motion lucide-react clsx tailwind-mergeProps
<NextBestActionCard /> accepts 6 props, all optional.
| Prop | Type | Default |
|---|---|---|
| actions | { id: string; title: string; description: string; reason: string; label: string; effort?: string; context?: string }[] | seed |
| onAction | (action: SuggestedAction) => void | Promise<void> | — |
| onSnooze | (action: SuggestedAction) => void | — |
| onDismiss | (action: SuggestedAction) => void | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- actions{ id: string; title: string; description: string; reason: string; label: string; effort?: string; context?: string }[]Default: seed
- onAction(action: SuggestedAction) => void | Promise<void>
- onSnooze(action: SuggestedAction) => void
- onDismiss(action: SuggestedAction) => void
- theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Next Best Action Card FAQ
- Does Later schedule a reminder?
- Later sets the suggestion aside for this mounted session. Connect onSnooze to your own reminder or scheduling service. Undo restores the last set-aside or dismissed suggestion locally; it does not reverse external side effects.
- How are actions completed?
- onAction can return a promise. The button stays busy until it resolves; errors are shown inline and leave the action available to retry. Without onAction, completion only affects the demo. Suggestions and their reasoning are supplied through actions.
