Components
Loading preview...
he Banner component is a flexible notification element for showing messages, alerts, or announcements. It supports multiple variants (success, warning, info, premium, etc.), different sizes, optional icons, action buttons, and a closable option. It also includes an autoHide feature to dismiss the banner automatically after a set time and an optional shimmer shade effect for extra visual emphasis.
npx shadcn@latest add https://21st.dev/r/sshahaider/bannerimport React from 'react';
import { Banner } from "@/components/ui/banner";
import { cn } from '@/lib/utils';
import { ArrowRightIcon, Rocket } from 'lucide-react';
import { Button } from '@/components/ui/button';
export default function DefaultDemo() {
const [show, setShow] = React.useState(true);
return (
<div className="relative flex h-full min-h-screen w-full items-center justify-center">
{/* Radial spotlight */}
<div
aria-hidden="true"
className={cn(
'pointer-events-none absolute -top-1/3 left-1/2 h-[120vmin] w-[120vmin] -translate-x-1/2 rounded-full',
'bg-[radial-gradient(ellipse_at_center,--theme(--color-foreground/.1),transparent_50%)]',
'blur-[30px]',
)}
/>
<Banner
show={show}
onHide={() => setShow(false)}
variant="default"
title="AI Dashboard is here!"
description="Experience the future of analytics"
showShade={true}
closable={true}
icon={<Rocket />}
action={
<Button
onClick={() => setShow(false)}
className="inline-flex items-center gap-1 rounded-md bg-black/10 px-3 py-1.5 text-sm font-medium transition-colors hover:bg-black/20 dark:bg-white/10 dark:hover:bg-white/20"
variant="ghost"
>
Try now
<ArrowRightIcon className="h-3 w-3" />
</Button>
}
/>
</div>
);
}