Suggestion chips
Ready-made prompts for an empty chat or follow-up questions under an answer.
Loading preview…
Install
- 1
Run this command in your Tailwind CSS project. It adds
components/ai/suggestion-chips-chips.tsxand installs its dependencies.$ npx shadcn@latest add https://gradientdeck.com/ai-components/r/suggestion-chips-chips.json
Usage & API
Example
import { SuggestionChips } from "@/components/ai/suggestion-chips-chips"
<SuggestionChips
suggestions={[]}
onPick={() => {}}
/>Props SuggestionChips
| Prop | Type & description | Required |
|---|---|---|
suggestions | string[] | Required |
onPick | (suggestion: string) => void | Required |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
Chips exports SuggestionChips. suggestions is a string array, and onPick receives the string. The list is centred and wraps, with a 9 pixel height on each pill, a light border and a small shadow. There is no selected state and no icon slot. Repeated strings would collide as React keys, because the key is the string itself. The entrance motion is skipped in spirit only by the delay math. The demo's form has a Send message button that is disabled until the input has trimmed text, which is why a chip that only fills the field still needs a second gesture to send. If you want one click to send, call your submit from onPick and do not wait for the field.
Example
import { SuggestionCards } from "@/components/ai/suggestion-chips-cards"
<SuggestionCards
cards={[]}
onPick={() => {}}
/>Props SuggestionCards
| Prop | Type & description | Required |
|---|---|---|
cards | StarterCard[] | Required |
onPick | (card: StarterCard) => void | Required |
picked | string | null | Optional |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
Starter cards exports SuggestionCards. A card's color is a CSS color used as --tint on the icon tile, mixed into the background and the icon. onPick receives the whole card, so you can route on title or read sub. picked is the title that should stay fully visible. When picked is undefined, the cards animate in with a 0.05 second stagger. Once picked is a string or null, that delay drops to zero so a selection does not replay the entrance. Hover lifts a card by 2 pixels. The demo sets picked to the title, then clears it back through null after 1.4 seconds, which is why the dimming flashes and releases. Pass a stable picked if the selection should stick. The heading and the sub line Good afternoon, Sam are outside the component.
Example
import { SuggestionList } from "@/components/ai/suggestion-chips-list"
<SuggestionList
suggestions={[]}
onPick={() => {}}
/>Props SuggestionList
| Prop | Type & description | Required |
|---|---|---|
suggestions | string[] | Required |
onPick | (suggestion: string) => void | Required |
title | string | Optional |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
Follow-up list exports SuggestionList. title defaults to Related and is a paragraph above a divided ul, not a heading level. Each suggestion is a full-width button. The arrow nudges right on hover and picks up a warm color. Rows stagger in by 0.05 seconds on the x axis. onPick receives the string. There is no picked prop, so the list does not dim siblings. The demo nests it under a user bubble and a paragraph, then mirrors the choice into a polite live region. Use a new array when the answer changes. Keys are the suggestion strings, so two identical follow-ups would share a key.
Choosing a layout
Use Chips on an empty thread, when any of several unrelated prompts is a fair start and you want them to land in the composer as editable text. Use Starter cards when each start needs a title and a second line, and when an icon helps scan them. The demo cards are Fix a bug, Draft an email, Read a spreadsheet and Brainstorm, with subs such as Paste the error and the code around it. The greeting above them, Good afternoon, Sam, and Pick a starting point or just start typing, is demo copy, not a prop. Use the follow-up list when the suggestions depend on the answer that just arrived. The default heading is Related. The demo questions are about feeding a starter, an acetone smell and the fridge.
Prompt input's hero has its own suggestion row. Those buttons call onChange on the hero and focus its textarea. They are plain strings under a builder prompt, with no list role and no picked state. Prefer Suggestion chips when the prompts are a section of their own, or when they belong under Message rather than inside the field. Do not use the follow-up list as a history of the thread. It does not remember what was asked. You pass the current array, and you remove a row by not passing it.
Do the chips submit the prompt or only fill the box?
They only call onPick. Chips in the demo copy the string into an input and focus it, and the person still presses Send message. Starter cards pass the whole card to onPick and dim the others if you set picked to that title. The follow-up list does the same with a string. If a product should send on the first click, do that in the handler. The components never see a form.
Can I mix an icon into the pill row?
Not on Chips. That variant is strings only. Starter cards take an icon node and a color per card, and they are tiles, not pills. The follow-up list always draws the same corner arrow, and you cannot swap it. If you need a labelled action with an icon in a wrapping row, Starter cards is the closest, or you keep Chips and put the icon in the surrounding layout, not in the pill.