āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/ibelick/prompt-kit/system-message/page ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
import ComponentCodePreview from "@/components/app/component-code-preview" import { generateMetadata } from "../utils/metadata" import { SystemMessageBasic } from "./system-message-basic" import { SystemMessageVariants } from "./system-message-variants" import { SystemMessageWithCta } from "./system-message-with-cta"
export const metadata = generateMetadata( "System Message", "Display contextual information, warnings, or instructions in AI interfaces." )
Display contextual information, warnings, or instructions in AI interfaces
<ComponentCodePreview component={<SystemMessageBasic />} filePath="app/docs/system-message/system-message-basic.tsx" classNameComponentContainer="p-8" />
<ComponentCodePreview component={<SystemMessageVariants />} filePath="app/docs/system-message/system-message-variants.tsx" classNameComponentContainer="p-8" />
<ComponentCodePreview component={<SystemMessageWithCta />} filePath="app/docs/system-message/system-message-with-cta.tsx" classNameComponentContainer="p-8" />
<CodeBlock
code={npx shadcn add "https://prompt-kit.com/c/system-message.json"}
language="bash"
/>
<Step>Copy and paste the following code into your project.</Step>
<CodeBlock filePath="components/prompt-kit/system-message.tsx" language="tsx" /><Step>Update the import paths to match your project setup.</Step>
</Steps> </TabsContent> </Tabs>| Prop | Type | Default | Description | | :----------- | :----------------------------------- | :------- | :------------------------------------------------------------------ | | children | React.ReactNode | | 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 | React.ReactNode | | 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 | React.HTMLAttributes<HTMLDivElement> | | Additional div props |
| Property | Type | Default | Description |
| :------- | :---------------------------------------------------- | :------ | :------------------------------------------------------------------- |
| label | string | | Text displayed inside the button |
| onClick | () => void | | Optional click handler |
| variant | "solid" | "outline" | "ghost" | React.ComponentProps<typeof Button>["variant"] | "solid" | Maps to your button variants; "solid" uses the default button style |
When cta is provided, SystemMessage renders a small Button next to the message content.
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā