System Message

Display contextual information, warnings, or instructions in AI interfaces

Examples

Basic system message

This conversation is visible to your team. Avoid sharing sensitive personal data.

You can switch to a private workspace at any time from the header.

Filled variants

Use the fill prop to apply semantic background colors based on the variant. Different variants (action, warning, error) provide visual context for the message severity.

The model is running in reasoning mode. Responses might take slightly longer.

Context window is close to the limit. Summarize the conversation or archive older messages.

The tool integration failed. Review the API credentials before retrying the request.

With CTA

Add a call-to-action button using the cta prop. You can also provide a custom icon using the icon snippet.

This workspace enforces human review. Make sure a teammate signs off on the final response before sending it to the customer.

Installation

Copy and paste the following code into your project.

pnpm dlx shadcn-svelte@latest add https://ai-elements.vercel.app/r/prompt-kit-system-message.json

Component API

SystemMessage

Prop	Type	Default	Description
`children`	`Snippet`	-	Content displayed inside the system message
`variant`	`"action" \| "warning" \| "error"`	`"action"`	Severity of the message, controlling text and icon styles
`fill`	`boolean`	`false`	When true, applies a semantic background color and hides the border
`icon`	`Snippet`	-	Custom icon to display instead of the default severity icon
`isIconHidden`	`boolean`	`false`	Hides the icon entirely when set to true
`cta`	`CTAConfig`	-	Configuration for the optional call-to-action button
`className`	`string`	-	Additional CSS classes
`...props`	`HTMLAttributes<HTMLDivElement>`	-	All other div props are supported

CTA configuration

When cta is provided, SystemMessage renders a small Button next to the message content.

CTAConfig

Prop	Type	Default	Description
`label`	`string`	-	Text displayed inside the button
`onClick`	`() => void`	-	Optional click handler
`variant`	`"default" \| "secondary" \| "outline" \| "ghost"`	`"default"`	Maps to button variants; "default" uses the default button style