Utility
AI
Terminal
Installation
pnpm dlx shadcn@latest add https://termcn.dev/r/banner.json
Usage
import { Banner } from "@/components/ui/banner";<Banner variant="info" title="Update">
A new version is available. Run npx update to upgrade.
</Banner>Examples
Success Banner
Terminal
import { Banner } from "@/registry/ui/banner";
export default function BannerSuccess() {
return (
<Banner variant="success" title="Deployed">
All services are live.
</Banner>
);
}
Error with Custom Icon
Terminal
import { Banner } from "@/registry/ui/banner";
export default function BannerError() {
return (
<Banner variant="error" icon="💥" title="Crash">
Worker process exited with code 1.
</Banner>
);
}
API Reference
Banner
| Prop | Type | Default |
|---|---|---|
children | ReactNode | required |
variant | "info" | "warning" | "error" | "success" | "neutral" | "info" |
icon | string | undefined |
title | string | undefined |
dismissible | boolean | false |
onDismiss | () => void | undefined |
color | string | undefined |
accentChar | string | "┃" |
gap | number | 1 |