Banner

A dismissible status banner with matching icons, optional descriptions, reduced-motion-aware reveal and hover animations, and neutral, info, success, warning, and error variants.

Installation

bunx shadcn@latest add https://ui.razeev.com/r/banner.json

Usage

tsx

import { Banner } from "@/components/hangry-ui/components/banner";

<Banner
  variant="warning"
  message="Your trial expires in 3 days."
  description="Upgrade to keep access to all features."
/>

Variants

Set variant to neutral, info, success, warning, or error. Each variant includes a matching icon. Add description for supporting text.

Props

Prop	Type	Default	Description
`variant`	`"neutral" \| "info" \| "success" \| "warning" \| "error"`	`"info"`	Banner appearance and status color.
`message`	`string`	`"A little update. A lot of possibilities. Explore what’s new."`	Text shown when children are not provided.
`children`	`ReactNode`	`—`	Custom content that replaces message.
`description`	`string`	`—`	Optional supporting text below the message.
`dismissible`	`boolean`	`true`	Displays the dismiss button.
`className`	`string`	`""`	Additional CSS classes on the component root.

Setup notes

Status variants use lucide-react icons and tinted backgrounds. Set message and the optional description to provide the alert text.