Admonitions
Callout blocks for highlighting important information with five distinct types.
Admonitions are callout blocks for highlighting important information. All five types are globally available — no imports needed.
Note
📝 Note
This is a note — use it for general information and tips.
📝 Custom Title
Notes are great for calling out important information readers shouldn’t miss.
:::note
This is a note — use it for general information and tips.
:::
:::note[Custom Title]
Notes are great for calling out important information readers shouldn't miss.
:::Tip
💡 Tip
This is a tip — use it for helpful suggestions and best practices.
💡 Pro Tip
Use keyboard shortcuts to speed up your workflow.
:::tip
This is a tip — use it for helpful suggestions and best practices.
:::
:::tip[Pro Tip]
Use keyboard shortcuts to speed up your workflow.
:::Info
ℹ️ Info
This is an info block — use it for additional context or background information.
ℹ️ Did You Know?
This feature was introduced in version 2.0.
:::info
This is an info block — use it for additional context or background information.
:::
:::info[Did You Know?]
This feature was introduced in version 2.0.
:::Warning
⚠️ Warning
This is a warning — use it to flag potential issues or things to watch out for.
⚠️ Deprecation Notice
This API will be removed in the next major version. Please migrate to the new API.
:::warning
This is a warning — use it to flag potential issues or things to watch out for.
:::
:::warning[Deprecation Notice]
This API will be removed in the next major version. Please migrate to the new API.
:::Danger
🚨 Danger
This is a danger alert — use it for critical warnings about data loss or breaking changes.
🚨 Breaking Change
Running this command will permanently delete all data. This action cannot be undone.
:::danger
This is a danger alert — use it for critical warnings about data loss or breaking changes.
:::
:::danger[Breaking Change]
Running this command will permanently delete all data. This action cannot be undone.
:::Component Syntax
In addition to the directive syntax shown above, you can use JSX component syntax. This is useful when you need more control or are building custom layouts.
<Note>
Default note with auto-generated title.
</Note>
<Warning title="Be Careful">
Warning with a custom title.
</Warning>The component syntax supports the same five types (Note, Tip, Info, Warning, Danger) and an optional title prop.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | Type name (e.g., “Note”) | Override the default title text |
Color Reference
Each admonition type uses a semantic color token for its border and title color:
| Type | Color Token | Typical Color |
|---|---|---|
| Note | accent | Blue |
| Tip | success | Green |
| Info | info | Cyan |
| Warning | warning | Yellow |
| Danger | danger | Red |