Dismissible gradient announcement banner
A slim, dismissible top-of-page banner with an icon, message, action button and a learn-more link, built on a gradient background with a grid-pattern overlay. Use for a limited-time offer or a site-wide announcement, not for anything a visitor must see (it is designed to be closed and forgotten).
Live preview
open in new tab ↗"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={<>Try the new plan, free for 1 month.</>}
action={{ label: "Get Started", onClick: () => console.log("cta clicked") }}
learnMoreUrl="#"
/>
)
}Block id: 21st-dev-cta-banner-dismissiblereact-tailwind · code-required
More cta blocks
Want the whole site, not just the block?
We ship real client sites in 3 weeks — with blocks like this one, wired to your brand.