Promp Suggestion
A component for implementing interactive prompt suggestions in AI interfaces. The PromptSuggestion component offers two distinct modes:
- Normal Mode: Renders clickable, pill-shaped buttons ideal for suggesting quick prompts in chat interfaces
- Highlight Mode: Provides text highlighting to highlight a part of the suggestion
Examples
Basic Usage
Display clickable prompt suggestions that users can select to populate an input field. You can easily use it with the PromptInput component.
Highlighted Prompt Suggestions
Implement prompt suggestions with search term highlighting. It's perfect to showcase a list of related prompts.
Complete Chat Interface
Build a full-featured chat interface with dynamic prompt suggestions that switch between both modes.
Installation
npx shadcn add "https://prompt-kit.com/c/prompt-suggestion.json"Component API
PromptSuggestion
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Content to display in the suggestion button | |
| variant | "default" | "destructive" | "outline" | "ghost" | "outline" | Visual variant of the button (normal mode) or "ghost" (highlight mode) |
| size | "default" | "sm" | "lg" | "icon" | "lg" | Size of the button (normal mode) or "sm" (highlight mode) |
| highlight | string | undefined | When provided, enables highlight mode and highlights this text within children |
| className | string | Additional CSS classes | |
| ...props | ButtonHTMLAttributes | All other button HTML attributes (including onClick) |