Prompt Suggestions

Things to ask in an empty AI conversation: chips, one scrolling row, or cards with an icon and a line.

$ pnpm dlx shadcn@latest add https://dashral.com/r/prompt-suggestions.json

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/prompt-suggestions.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json

1{
2  "registries": {
3    "@dashral": "https://dashral.com/r/{name}.json"
4  }
5}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/prompt-suggestions

Usage

example.tsx

1import { PromptSuggestions } from "@/components/dashral/prompt-suggestions"
2
3<PromptSuggestions
4  suggestions={["Summarize this week's sales", "Which invoices are overdue?", "Draft a reply to the latest ticket"]}
5  onSelect={(prompt) => api.chat.send(prompt)}
6/>

Examples

Starter cards

A title, a line on what you'll get, and a prompt that can differ from the title.

One row that scrolls

For a narrow panel or a phone; the edges fade while there's more.

API reference

PromptSuggestions

Also takes every prop of <div>(opens in a new tab).

Prop	Type	Default
`suggestions`	`(string \| { label, prompt?, description?, icon?, disabled? })[]` Required. A string is its own prompt.	—
`onSelect`	`(prompt: string) => void` Called with the prompt of the one picked.	—
`variant`	`"chips" \| "cards"` Round chips, or a grid of cards with an icon, a title and a line.	`"chips"`
`scroll`	`boolean` Chips in one row that scrolls sideways, its edges fading, instead of wrapping.	`false`
`aria-label`	`string` Names the group.	`"Suggestions"`
`classNames`	`{ item?, icon?, label?, description? }` Classes for each part.	—
`className`	`string` Extra classes, merged with cn() so yours win.	—

Keyboard

Keys	Action
`Tab`	Each suggestion in turn
`Enter`or`Space`	Pick it

Accessibility

A group of buttons, named Suggestions; each button reads its label (and, as a card, its line).
Scrolling chips still reach every one with Tab: focusing a chip scrolls it into view.

Motion

Colors ease in on hover over --duration-fast; a card's arrow nudges toward its corner, and stays put with reduced motion.