A component for implementing interactive prompt suggestions in AI interfaces, with both clickable suggestion buttons and highlight mode for matched text.
Installation
Install shadcn-svelte components
Install the required shadcn-svelte components for this component:
Copy the Source Code
Copy and paste the following code into your project:
Examples
Demo
Props
PromptSuggestion
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | - | Button label or custom content rendered inside the suggestion. |
variant | ButtonVariant | - | Button style variant when rendered as a suggestion. |
size | ButtonSize | - | Button size used for the suggestion. |
class | string | - | Additional CSS classes for the button. |
highlight | string | - | When set, highlights the matching substring in the content. |
ref | HTMLElement | null | - | Bindable reference to the rendered button element. |
onclick | (event: MouseEvent) => void | - | Called when the suggestion is clicked. |
disabled | boolean | - | Disables the button. |
type | "button" | "submit" | "reset" | "button" | Native button type. |