Callout

Feedback

An inline note for docs, guides, and form helpers.

The Callout draws attention to a specific piece of content without interrupting the page flow. Use it to annotate documentation and long-form UI.

npx shadcn@latest add callout

Variants

Four tones with a colored left border and icon.

Preview

Live

Note

Use callouts sparingly to avoid interrupting the reading flow.

Tip

Test your components against both light and dark themes.

Watch out

This API is deprecated and will be removed in v2.

Action required

Upgrade to the latest version to receive the security patch.

tsx

1<Callout title="Note">Use callouts sparingly.</Callout>
2<Callout variant="success" title="Tip">Test both themes.</Callout>
3<Callout variant="warning" title="Watch out">Deprecated in v2.</Callout>
4<Callout variant="error" title="Action required">Upgrade now.</Callout>

Custom icon

Swap the default icon for any lucide icon.

Preview

Live

What's new

Shelf 1.0 ships 20 new components and a redesigned docs site.

tsx

1<Callout icon={RocketIcon} title="What's new">
2  Shelf 1.0 ships 20 new components.
3</Callout>

API reference

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
variant	"info" \| "success" \| "warning" \| "error"= "info"	Tone and icon of the callout.
title	string	Bold heading shown next to the icon.
icon	LucideIcon	Override the default icon for the variant.
children	ReactNode	Body content of the callout.
className	string	Custom classes for the container.