Callout

Highlight notes, tips and warnings.

Installation

npx shadcn@latest add @docscn/callout

<Callout title="Note">The default type is info.</Callout>

<Callout type="warn" title="Warning">
  Be careful with this.
</Callout>

Note

The default type is info.

Warning

Be careful with this.

Error

Something went wrong.

Success

It worked.

Idea

Try this.

Prop	Type	Description
`type`	`"info" \| "warn" \| "warning" \| "error" \| "success" \| "idea"`	Defaults to `"info"`.
`title`	`ReactNode`	An optional title.
`icon`	`ReactNode`	Replace the type's icon.

Callout is built on shadcn/ui alert. CalloutContainer, CalloutTitle and CalloutDescription are exported to compose your own.

Code block

Code blocks and code tabs for Shiki output.

Card

Link cards with an icon, title and description.