Banners

bundui/banners-01

FreeComponent

Highlight promotions, announcements, or key messages with Tailwind CSS banner sections. These layouts combine bold visuals, concise copy, and strategic calls-to-action to capture attention. Perfect for marketing campaigns, landing pages, and SaaS platforms seeking a modern, high-impact, and conversion-focused presentation.

Live preview

live · rendered by the registry

Rendered by bundui on their own page — this is the component running, not a screenshot of it.

Install it

npx shadcn@latest add https://bundui.io/r/banners-01.json

Source

examples/blocks/marketing/banners/01/page.tsxbundui.io/r/banners-01.json

1import { XIcon } from "lucide-react";
2 
3export default function Banner() {
4  return (
5    <>
6      <div className="w-full bg-gradient-to-r from-[#4F39F6] to-[#FDFEFF] py-2.5 text-center text-sm font-medium text-white">
7        <p>
8          <span className="mr-2 rounded-md bg-white px-3 py-1 text-indigo-600">Launch offer</span>
9          Try prebuiltui today and get $50 free credits
10        </p>
11      </div>
12 
13      {/* fake content */}
14      <div className="h-60"></div>
15    </>
16  );
17}

What it pulls in

npm packages

lucide-react

Files it writes

examples/blocks/marketing/banners/01/page.tsx

More from bundui

All 217 items

Same registry, same kind — the ones you would have found next
Component	Registry	Kind	Access	Installs
Accordionaccordion-collapsible	bundui	Components	Free	no deps · 2 files
Accordionaccordion-default	bundui	Components	Free	no deps
Accordionaccordion-with-plus-icon	bundui	Components	Free	2 deps
Alertalert-danger	bundui	Components	Free	1 dep
Alertalert-default	bundui	Components	Free	no deps
Alert Dialogalert-dialog	bundui	Components	Free	no deps
Alertalert-success	bundui	Components	Free	1 dep
Alertalert-warning	bundui	Components	Free	1 dep