Components / Feedback
CustomBanner
Customizable banner with gradients and patterns.
Preview
Update
This banner demonstrates custom styling with gradients and patterns.
1import { CustomBanner } from "@/components/ui/custom-banner"2
3export function CustomBannerDemo() {4 return (5 <CustomBanner6 variant="primary"7 pattern="none"8 hasGlow={false}9 title="Announcement"10 description="This is a custom banner with styling."11 />12 )13}announcement
The announcement style of this component.
New Feature
This banner demonstrates custom styling with gradients and patterns.
1import { CustomBanner } from "@/components/ui/custom-banner"2
3export function CustomBannerDemo() {4 return (5 <CustomBanner6 variant="gradient"7 pattern="dots"8 hasGlow={true}9 title="Announcement"10 description="This is a custom banner with styling."11 />12 )13}promotion
The promotion style of this component.
Special Offer
This banner demonstrates custom styling with gradients and patterns.
1import { CustomBanner } from "@/components/ui/custom-banner"2
3export function CustomBannerDemo() {4 return (5 <CustomBanner6 variant="glass"7 pattern="grid"8 hasGlow={true}9 title="Announcement"10 description="This is a custom banner with styling."11 />12 )13}Installation
Add the source directly to your project with the shadcn CLI.
npx shadcn@latest add qentrah/DUI/custom-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.