Components
Loading preview...
A versatile notification banner component with gradient background and grid pattern overlay. Originally designed for Dub.co's domain claim notifications. Features - Dismissible banner with close button - Optional icon with circular background - Customizable action button - "Learn more" link support - Responsive layout (mobile/desktop) - Built-in grid pattern background
npx shadcn@latest add https://21st.dev/r/dubinc/banner"use client"
import { useState } from "react"
import { LinkIcon } from "lucide-react"
import { Banner } from "@/components/ui/banner"
export function BannerDemo() {
const [show, setShow] = useState(true)
return (
<Banner
show={show}
onHide={() => setShow(false)}
icon={<LinkIcon className="m-px h-4 w-4 text-green-800" />}
title={
<>
Claim a free <span className="font-semibold">.link</span> domain, free
for 1 year.
</>
}
action={{
label: "Claim Domain",
onClick: () => console.log("Claim domain clicked"),
}}
learnMoreUrl="https://dub.co/help/article/free-dot-link-domain"
/>
)
}