Components / Feedback
Banner
Notification banner with status variants.
Preview
Information
This is a notification banner with contextual styling.
1import { Banner } from "@/components/ui/banner"2
3export function BannerDemo() {4 return (5 <Banner6 variant="default"7 title="Title"8 description="Banner description with context."9 />10 )11}success
The success style of this component.
Status
This is a notification banner with contextual styling.
1import { Banner } from "@/components/ui/banner"2
3export function BannerDemo() {4 return (5 <Banner6 variant="success"7 title="Title"8 description="Banner description with context."9 />10 )11}warning
The warning style of this component.
Status
This is a notification banner with contextual styling.
1import { Banner } from "@/components/ui/banner"2
3export function BannerDemo() {4 return (5 <Banner6 variant="warning"7 title="Title"8 description="Banner description with context."9 />10 )11}danger
The danger style of this component.
Status
This is a notification banner with contextual styling.
1import { Banner } from "@/components/ui/banner"2
3export function BannerDemo() {4 return (5 <Banner6 variant="danger"7 title="Title"8 description="Banner description with context."9 />10 )11}Installation
Add the source directly to your project with the shadcn CLI.
npx shadcn@latest add qentrah/DUI/bannerUsage
Install the component, import it from your configured UI directory, and adapt the source to your product. Open the source panel under any example to copy that exact variant.