5Sponsor

Banner

Full-width announcement banner

Terminal
banner-demo
No opentui live preview is registered for this example yet.

Installation

pnpm dlx shadcn@latest add @termcn/banner

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
banner-success
No opentui live preview is registered for this example yet.

Error with Custom Icon

Terminal
banner-error
No opentui live preview is registered for this example yet.

API Reference

PropTypeDefault
childrenReactNoderequired
variant"info" | "warning" | "error" | "success" | "neutral""info"
iconstringundefined
titlestringundefined
dismissiblebooleanfalse
onDismiss() => voidundefined
colorstringundefined
accentCharstring"┃"
gapnumber1