On this page

Aside

The Aside component helps highlight important information in your documentation using visually distinct callouts. Each variant comes with its own icon and color scheme for clear visual hierarchy.

Basic Usage

The Aside component requires a variant prop to determine its appearance and semantic meaning.

<Aside variant="info">
  This is a basic info aside that provides additional context.
</Aside>

Custom Titles

You can add a title to any aside variant using the title prop:

<Aside variant="tip" title="New title!">
  Adding a title helps categorize and organize your asides.
</Aside>

Variants

Info

Use for general information and notes.

Info

The info variant is perfect for providing additional context or background information that might be helpful but isn’t critical.

Tip

Use for helpful suggestions and best practices.

Tip

Here’s a useful tip: You can use keyboard shortcuts to navigate through the documentation more quickly.

Caution

Use for important notices that users should be aware of.

Caution

Be careful when modifying these settings. Make sure to back up your data first.

Danger

Use for critical warnings about potential problems.

Danger

Danger! This action cannot be undone. All associated data will be permanently deleted.

Props

Prop	Type	Required	Description
`variant`	`"tip" \| "caution" \| "danger" \| "info"`	Yes	Determines the style and icon of the aside
`title`	`string`	No	Optional title to display at the top of the aside

Features

Markdown Support

The Aside component supports full markdown content, including:

Lists
Code blocks
Links
And other MDX components

Pro Tip

You can use bold text, inline code, and even:

// code blocks
function example() {
  return "Hello World";
}

Styling

Each variant has its own color scheme and matching icon:

info - Blue with info circle icon
tip - Green with lightbulb icon
caution - Yellow with warning triangle icon
danger - Red with flame icon

The styles are designed to be accessible and visually distinct while maintaining harmony with your documentation’s theme.