Callout

FreeNew

A boxed note for documentation and settings pages, with a kind label, title, body and optional action.

The full demo as documented.

Customize

Derived from this item’s props table, because it declares no controls of its own. Changes drive the preview live.

title

kind

children


pnpm dlx shadcn@latest add https://ui.tealmac.com/r/callout.json

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

<Callout title="Tokens rotate every 90 days" kind="caution">
  Update your CI secrets before the current token expires.
</Callout>

Prop	Type	Default	Description
`title`	`string`	-	Heading. Also the accessible name of the `<aside>`.
`kind`	`"tip" \| "note" \| "caution"`	`"tip"`	Sets the icon, the label text and the accent color.
`action`	`React.ReactNode`	-	Link or button below the body.
`children`	`React.ReactNode`	-	Body text.

Also accepts all <aside> props.

The kind is shown as text as well as color, so it does not rely on color alone.

Guide and examples


pnpm dlx shadcn@latest add https://ui.tealmac.com/r/callout.json

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

<Callout title="Tokens rotate every 90 days" kind="caution">
  Update your CI secrets before the current token expires.
</Callout>

Prop	Type	Default	Description
`title`	`string`	-	Heading. Also the accessible name of the `<aside>`.
`kind`	`"tip" \| "note" \| "caution"`	`"tip"`	Sets the icon, the label text and the accent color.
`action`	`React.ReactNode`	-	Link or button below the body.
`children`	`React.ReactNode`	-	Body text.

Also accepts all <aside> props.

The kind is shown as text as well as color, so it does not rely on color alone.