AiPrompts

AiPrompts provides elegant cards or list layouts for suggestions and quick actions.

Basic Usage

Horizontal prompt cards.

Basic Usage

Vertical Layout

Vertical layout is recommended when space is limited.

Vertical Layout

Custom Theme

Use theme-overrides to personalize component styles.

Custom Theme

API

Props

Name	Description	Type	Default
items	Prompt data list	(AiPromptItem | string)[]	[]
layout	Layout mode: horizontal vertical waterfall	string	'horizontal'
title	Top header text	string	''
theme-overrides	Theme variables override	AiPromptsThemeVars	—

Events

Name	Description	Callback Parameters
click	Emitted when item is clicked	(item: AiPromptItem | string) => void

Slots

Name	Description	Slot Scope
title	Custom title area	—
item	Custom item rendering	{ item: AiPromptItem | string, index: number }
icon	Custom internal icon	{ icon: string }

Use in Nuxt

This component fully supports Nuxt 3/4. In Nuxt projects, the component will be automatically imported.

For detailed configuration, please see Nuxt Integration.

Theme Variables

Variable Name	Description	Default Value
--yh-ai-prompts-bg-color	Container background color	var(--yh-bg-color)
--yh-ai-prompts-border-color	Border color	var(--yh-border-color)
--yh-ai-prompts-border-radius	Border radius	var(--yh-border-radius-base)
--yh-ai-prompts-header-font-size	Header font size	14px
--yh-ai-prompts-item-min-height	Item minimum height	48px
--yh-ai-prompts-active-border-color	Active/hover border color	var(--yh-color-primary)
--yh-ai-prompts-item-hover-bg-color	Item hover background color	var(--yh-color-primary-light-9)
--yh-ai-prompts-hover-text-color	Item hover text color	var(--yh-color-primary)
--yh-ai-prompts-icon-size	Icon size	20px
--yh-ai-prompts-icon-color	Icon color	var(--yh-color-primary)