Promo Banner

New

Floating promotional banner with marquee animation, discount badges, and localStorage persistence. Perfect for campaigns, sales, and special offers.

Preview

Installation

npm

pnpm

yarn

bun

npx shadcn@latest add @gooseui/promo-banner

Add the marquee animation to your globals.css:

@layer utilities {
  .animate-marquee {
    animation: marquee var(--duration, 20s) linear infinite;
  }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% - 1rem)); }
}

Usage

import { PromoBanner } from "@/components/ui/promo-banner"

export default function Page() {
  return (
    <PromoBanner
      title="Winter Campaign"
      headline="START 2025 WITH A BANG!"
      price={229}
      originalPrice={1444}
      ctaText="Get Bundle"
      ctaHref="/pricing"
      marqueeText="3 DAYS LEFT • FIRST 100 ONLY"
      storageKey="promo-winter-2025"
    />
  )
}

Examples

Positions

Choose where the banner appears on screen

<PromoBanner position="top-left" />
<PromoBanner position="top-right" />
<PromoBanner position="bottom-left" />
<PromoBanner position="bottom-right" /> // default

Custom Gradients

Customize the gradient colors to match your brand

<PromoBanner
  gradientFrom="from-blue-600"
  gradientTo="to-cyan-500"
/>

With localStorage

Remember when user closes the banner

<PromoBanner
  storageKey="promo-winter-2025"
  delay={3000} // show after 3 seconds
/>

Using Provider

Global banner management with context

import { PromoBannerProvider, usePromoBanner } from "@/components/ui/promo-banner"

// In layout or app
<PromoBannerProvider>
  <App />
</PromoBannerProvider>

// Anywhere in your app
function Component() {
  const { show, hide } = usePromoBanner()

  return (
    <button onClick={() => show({
      headline: "Flash Sale!",
      price: 99,
      originalPrice: 199,
    })}>
      Show Promo
    </button>
  )
}

Props

Prop	Type	Default	Description
headline	string	required	Main headline text
price	number	required	Current price
title	string	"Special Offer"	Small title above headline
originalPrice	number	-	Original price (crossed out)
currency	string	"$"	Currency symbol
ctaText	string	"Get Now"	CTA button text
ctaHref	string	"#"	CTA button link
marqueeText	string	-	Scrolling text at bottom
position	"bottom-right" \| "bottom-left" \| "top-right" \| "top-left"	"bottom-right"	Banner position
gradientFrom	string	"from-violet-600"	Gradient start color class
gradientTo	string	"to-pink-600"	Gradient end color class
storageKey	string	-	localStorage key for persistence
delay	number	0	Delay before showing (ms)
images	string[]	-	Product image URLs
onClose	() => void	-	Close callback