An empty-assistant screen using Prompt Suggestions to offer high-value starting prompts before the user types anything.
Loading demo: prompt-suggestion-real-world
npx sdaia-ui@latest add prompt-suggestion
import { PromptSuggestion } from "sdaia-ui"1<PromptSuggestion2variant="brand"3title="Analyze Revenue Anomalies"4description="Parse your uploaded transaction database for trailing outliers."5category="Data Analysis"6meta="~2.1k tokens"7/>
A raised surface — the default style.
Loading demo: prompt-suggestion-brand
A subtle surface.
Loading demo: prompt-suggestion-neutral
A transparent surface with a default border.
Loading demo: prompt-suggestion-outline
Hide the leading icon disc with showIcon={false}.
Loading demo: prompt-suggestion-without-icon
Prop | Type | Default | Required |
|---|---|---|---|
variant | 'brand' | 'neutral' | 'outline' | 'brand' | optional |
title | ReactNode | — | required |
description | ReactNode | — | optional |
category | ReactNode | — | optional |
meta | ReactNode | — | optional |
icon | string | sparklesStroke | optional |
showIcon | boolean | true | optional |
dir | 'ltr' | 'rtl' | — | optional |