Prompt
Display a predefined set of questions or suggestion..
Ignite Your Creativity
Got any sparks for a new project?
Uncover Background Info
Help me understand the background of this topic.
Efficiency Boost Battle
How can I work faster and better?
Tell me a Joke
Why do not ants get sick? Because they have tiny ant-bodies!
Common Issue Solutions
How to solve common issues? Share some tips!
Installation
pnpm dlx shadcn@latest add https://ui.aoian.chat/r/prompt
Usage
import {
Prompt,
PromptContent,
PromptDescription,
PromptIcon,
PromptItem,
PromptLabel,
} from "@/components/aoian-ui/prompt/prompt"<Prompt>
<PromptItem>
<PromptIcon>
<Lightbulb className="text-yellow-300" />
</PromptIcon>
<PromptContent>
<PromptLabel>Ignite Your Creativity</PromptLabel>
<PromptDescription>
Got any sparks for a new project?
</PromptDescription>
</PromptContent>
</PromptItem>
</Prompt>Examples
Disabled
To mark a prompt as disabled, add the disabled property to the prompt item.
Ignite Your Creativity
Got any sparks for a new project?
Uncover Background Info
Help me understand the background of this topic.
Vertical
Use the vertical property to control the Prompts' display direction.
Got any sparks for a new project?
Help me understand the background of this topic.
How can I work faster and better?
Why do not ants get sick? Because they have tiny ant-bodies!
How to solve common issues? Share some tips!
Wrap
Use the wrap attribute to control the layout of the Prompts.
Got any sparks for a new project?
Help me of this topic.
How can I work faster and better?
Why do not ants get sick?
How to solve common issues?
Variant
Set the style variant of the prompt through the variant property.
Got any sparks for a new project?
Help me understand the background of this topic.
How can I work faster and better?
Props
Prompt
| Prop | Type | Default | Description |
|---|---|---|---|
vertical | boolean | false | When set to true, the Prompts will be arranged vertically. |
wrap | boolean | false | When set to true, the Prompts will automatically wrap. |
PromptItem
| Prop | Type | Default | Description |
|---|---|---|---|
disabled | boolean | false | Style variant |
variant | filled | outlined | borderless | filled | When set to true, the Prompts will automatically wrap. |