Callout

Info

Streaming starts after the first token arrives.

Warning

This adapter needs an API key at build time.

Success

The thread was exported as markdown.

Installation

Copy the source into components/ui/callout.tsx. Registry items that depend on it install it automatically.

components/ui/callout.tsx

Usage

import { Callout } from "@/components/ui/callout";

export function Example() {
  return <Callout type="warning">This adapter needs an API key.</Callout>;
}

In MDX the callout also renders from a plain blockquote, so prose can stay prose.

Examples

With a title and custom content

A title replaces the type word in the eyebrow. Inline code, kbd caps, links, and lists keep the ink register inside the aside.

Tip

Press ⌘ I anywhere on the site to ask the docs.

Build failed

The registry item names a file that does not exist.

API Reference

Callout

CalloutProps

type : "info" | "warning" | "error" | "success" | "idea" | "tip" | "note" | "warn" = "info": The rule hue and the eyebrow word. tip and note keep their own labels on the info hue; warn aliases warning.
title ?: ReactNode: Replaces the type word in the eyebrow.
className ?: string: Additional CSS classes.