Components
Highlight important information with customizable alert callouts
The <Callout> component displays highlighted messages to draw attention to important information like warnings, tips, errors, or notes. Built on Chakra UI's Alert component.
This is an informational callout for general notices.
<Callout status="info" title="Information">
This is an informational callout for general notices.
</Callout>This feature is available on all plans starting from v2.0.
This action cannot be undone. Make sure to backup your data first.
This endpoint has been deprecated and will be removed in v3.0.
Your configuration has been successfully saved.
<Callout status="info" title="Helpful Tip">
This feature is available on all plans starting from v2.0.
</Callout>
<Callout status="warning" title="Important">
This action cannot be undone. Make sure to backup your data first.
</Callout>
<Callout status="error" title="Breaking Change">
This endpoint has been deprecated and will be removed in v3.0.
</Callout>
<Callout status="success" title="All Set!">
Your configuration has been successfully saved.
</Callout>Make sure you have Node.js 18+ installed before continuing.
Remember to restart the development server after changing configuration files.
<Callout status="info" title="Prerequisites">
Make sure you have Node.js 18+ installed before continuing.
</Callout>
<Callout status="warning">
Remember to restart the development server after changing configuration files.
</Callout>Callouts support Markdown formatting within the content:
The default rate limit is 1000 requests per hour. Need more? Check out our Enterprise plans for higher limits.
Rate limit headers:
X-RateLimit-Limit - Total requests allowedX-RateLimit-Remaining - Requests remainingX-RateLimit-Reset - Time when limit resets<Callout status="info" title="API Rate Limits">
The default rate limit is **1000 requests per hour**. Need more?
Check out our [Enterprise plans](/pricing) for higher limits.
Rate limit headers:
- `X-RateLimit-Limit` - Total requests allowed
- `X-RateLimit-Remaining` - Requests remaining
- `X-RateLimit-Reset` - Time when limit resets
</Callout>The visual style and color of the callout.
Options: info, warning, error, success
<Callout status="warning">Your message here</Callout>Optional title displayed before the message content.
<Callout status="info" title="Did you know?">
Content here
</Callout>The content of the callout. Supports Markdown formatting.
<Callout status="info">
You can use **bold**, *italic*, and [links](/docs).
</Callout>Next, learn about the Steps Component for creating step-by-step guides.