Callout

Callout

Alert boxes for important information with variants

Installation

Install the component using the CLI:

npx mdx-ui add callout

This will automatically install the utils dependency.

import { Callout } from "@/components/mdx/callout";
 
<Callout>This is a default callout</Callout>;

Info

Use for general information or helpful insights.

Note

Perfect for adding additional context or side notes.

Tip

Great for quick tips, best practices, or suggestions.

Warning

Use to caution users about potential issues.

Danger

Highlight critical errors or serious warnings.

<Callout variant="info">
  This is an informational message to help guide users.
</Callout>

<Callout variant="warning">Warning: This action cannot be undone.</Callout>

<Callout variant="danger">
  Error: This is a critical error that needs immediate attention.
</Callout>

<Callout variant="success">Success! Your changes have been saved.</Callout>

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	The callout content
`variant`	`"info" \| "warning" \| "danger" \| "success"`	`"info"`	The callout style variant
`className`	`string`	-	Additional CSS classes

On This Page