Callout
Highlighted content block with variant styles for info, warning, danger, and more. Install Callout from the VLLNT UI registry with the shadcn CLI.
What it is and when to use
Callout is a small boxed component that draws attention to a piece of content — an aside, a tip, a caveat, or a hazard. It renders a left-bordered panel with a title and body, and ships six semantic variants: info, note, tip, success, warning, and danger. Each variant sets its own color and default heading, and you can override the title, pass a custom icon, or add classes. Reach for it in documentation, changelogs, and long-form pages.
ContentHighlighted content block with variant styles for info, warning, danger, and more. Part of the content family in VLLNT UI, it ships as a machine-readable registry entry — copy the source directly into your app with the shadcn CLI and own it, no runtime dependency on a component library.
Preview
Switch between light and dark to inspect the embedded Storybook preview.
Installation
Add Callout to your project with the shadcn CLI. The source lands in your codebase, ready to adapt:
pnpm dlx shadcn@latest add https://ui.vllnt.com/r/callout.jsonSource
import type { ReactNode } from "react";
import { cn } from "../../lib/utils";
export type CalloutVariant =
| "danger"
| "info"
| "note"
| "success"
| "tip"
| "warning";
export type CalloutProps = {
children: ReactNode;
className?: string;
icon?: ReactNode;
title?: string;
variant?: CalloutVariant;
};
const variantStyles: Record<
CalloutVariant,
{ className: string; defaultTitle: string }
> = {
danger: {
className: "border-red-500/50 bg-red-500/10 text-red-700 dark:text-red-300",
defaultTitle: "Danger",
},
info: {
className:
"border-blue-500/50 bg-blue-500/10 text-blue-700 dark:text-blue-300",
defaultTitle: "Info",
},
note: {
className:
"border-gray-500/50 bg-gray-500/10 text-gray-700 dark:text-gray-300",
defaultTitle: "Note",
},
success: {
className:
"border-green-500/50 bg-green-500/10 text-green-700 dark:text-green-300",
defaultTitle: "Success",
},
tip: {
className:
"border-amber-500/50 bg-amber-500/10 text-amber-700 dark:text-amber-300",
defaultTitle: "Tip",
},
warning: {
className:
"border-orange-500/50 bg-orange-500/10 text-orange-700 dark:text-orange-300",
defaultTitle: "Warning",
},
};
export function Callout({
children,
className,
icon,
title,
variant = "info",
}: CalloutProps): React.ReactNode {
const config = variantStyles[variant];
const displayTitle = title ?? config.defaultTitle;
return (
<div
className={cn(
"my-6 rounded-lg border-l-4 p-4",
config.className,
className,
)}
role="alert"
>
<div className="flex items-start gap-3">
{icon ? (
<span className="size-5 flex-shrink-0 mt-0.5">{icon}</span>
) : null}
<div className="flex-1 min-w-0">
{displayTitle ? (
<p className="font-semibold mb-1">{displayTitle}</p>
) : null}
<div className="text-sm [&>p]:mb-0 [&>p:last-child]:mb-0">
{children}
</div>
</div>
</div>
</div>
);
}
Stories
Explore every variant and state in the interactive Storybook:
Preview
Switch between light and dark to inspect the embedded Storybook preview.
FAQ
- What is Callout?
- Callout is a React component that renders a highlighted, left-bordered box for notes, tips, and warnings. It ships six variants — info, note, tip, success, warning, and danger — each with its own color and default title.
- How do I add Callout to my app?
- Run `pnpm dlx shadcn@latest add https://ui.vllnt.com/r/callout.json` to copy the component into your project, then import and render `<Callout variant="tip">…</Callout>`.
- What severity styles does Callout support?
- The `variant` prop accepts info, note, tip, success, warning, or danger; each applies its own border and background color and a default title you can override. The wrapper carries `role="alert"` for assistive tech.