You can change the variant of the banner to default, minimal, popup, destructive, warning, success, info, or announcement.

🎉 Start your free trial today!

Get 30 days free access to all premium features

Create next-generation digital products

Build faster with our platform

Get Started →

src/components/banner-demo.tsx

import { Banner } from "@/components/billingsdk/banner";

export default function FreeTrialBannerDemo() {
  return (
    <div className="bg-background-secondary flex h-full min-h-[500px] w-full flex-col gap-6 overflow-hidden rounded-lg border-2">
      <Banner
        title="🎉 Start your free trial today!"
        description="Get 30 days free access to all premium features"
        buttonText="Start Free Trial"
        buttonLink="https://example.com/signup"
        variant="default" // default, minimal, popup
      />

      {/* minimal hero example */}
      <section className="flex flex-col items-center justify-center gap-4 py-16 text-center">
        <h1 className="text-foreground-secondary text-3xl font-bold tracking-tight">
          Create next-generation digital products
        </h1>
        <div className="flex flex-col gap-2">
          <p className="text-muted-foreground max-w-md">
            Build faster with our platform
          </p>
          <a className="hover:text-primary underline underline-offset-4 transition">
            Get Started →
          </a>
        </div>
      </section>
    </div>
  );
}

Installation

npx shadcn@latest add @billingsdk/banner

pnpm dlx shadcn@latest add @billingsdk/banner

yarn dlx shadcn@latest add @billingsdk/banner

bunx shadcn@latest add @billingsdk/banner

npx @billingsdk/cli add banner

pnpm dlx @billingsdk/cli add banner

yarn dlx @billingsdk/cli add banner

bunx @billingsdk/cli add banner

🎉 Explore your next destination today!

Discover the best places to visit in the world

Explore the best places to visit in the world

Get Started →

src/components/banner-demo-two.tsx

import { Banner } from "@/components/billingsdk/banner";

export default function FreeTrialBannerDemo() {
  return (
    <div className="bg-background-secondary flex h-full min-h-[500px] w-full flex-col gap-6 overflow-hidden rounded-lg border border-2">
      <Banner
        title="🎉 Explore your next destination today!"
        description="Discover the best places to visit in the world"
        variant="minimal" // default, minimal, popup
      />

      {/* minimal hero example */}
      <section className="flex flex-col items-center justify-center gap-4 py-16 text-center">
        <h1 className="text-foreground-secondary text-3xl font-bold tracking-tight">
          Discover the best places to visit in the world
        </h1>
        <div className="flex flex-col gap-2">
          <p className="text-muted-foreground max-w-md">
            Explore the best places to visit in the world
          </p>
          <a className="hover:text-primary underline underline-offset-4 transition">
            Get Started →
          </a>
        </div>
      </section>
    </div>
  );
}

src/components/banner-demo-three.tsx

"use client";

import { Banner } from "@/components/billingsdk/banner";
import { useState } from "react";
import { Button } from "./ui/button";

export default function FreeTrialBannerDemoThree() {
  const [showBanner, setShowBanner] = useState(false);
  return (
    <div className="flex h-full min-h-[500px] w-full flex-col items-center justify-center gap-4 rounded-lg border">
      {showBanner && (
        <Banner
          title="🎉 Start your free trial today!"
          description="Get 30 days free access to all premium features"
          variant="popup" // default, minimal, popup
        />
      )}
      <div className="flex h-full w-full flex-row items-center justify-center gap-4">
        <Button onClick={() => setShowBanner(true)}>Show Banner</Button>
      </div>
    </div>
  );
}

The banner component supports animated gradient backgrounds with custom colors. The gradient automatically adapts to both light and dark themes.

Default Banner

🌈 Experience the magic of gradients!

Beautiful animated gradient background with custom colors

Minimal Banner

🎉 Start your free trial today!

Get 30 days free access

Popup Banner

src/components/banner-gradient-demo.tsx

"use client";

import { Banner } from "@/components/billingsdk/banner";
import { useState } from "react";
import { Button } from "./ui/button";
export const gradientColors = [
  "rgba(0,149,255,0.56)",
  "rgba(231,77,255,0.77)",
  "rgba(255,0,0,0.73)",
  "rgba(131,255,166,0.66)",
];
export default function BannerGradientDemo() {
  const [showBanner, setShowBanner] = useState(false);

  return (
    <div className="w-full space-y-8">
      {/* Default Variant */}
      <div className="space-y-4">
        <h3 className="text-lg font-medium">Default Banner</h3>
        <Banner
          title="🌈 Experience the magic of gradients!"
          description="Beautiful animated gradient background with custom colors"
          buttonText="Start Free Trial"
          buttonLink="https://example.com/signup"
          variant="default"
          gradientColors={gradientColors}
          className="w-full"
        />
      </div>

      {/* Minimal Variant */}
      <div className="space-y-4">
        <h3 className="text-lg font-medium">Minimal Banner</h3>
        <Banner
          title="🎉 Start your free trial today!"
          description="Get 30 days free access"
          variant="minimal"
          gradientColors={gradientColors}
        />
      </div>

      {/* Interactive Popup Demo */}
      <div className="space-y-4">
        <h3 className="text-lg font-medium">Popup Banner</h3>
        <div className="flex justify-center">
          <Button variant="outline" onClick={() => setShowBanner(true)}>
            Show Gradient Banner
          </Button>
        </div>
        {showBanner && (
          <Banner
            title="🎉 Start your free trial today!"
            description="Get 30 days free access to all premium features"
            variant="popup"
            gradientColors={gradientColors}
          />
        )}
      </div>
    </div>
  );
}

⚠️ Payment Failed - Subscription Suspended

Your subscription will be canceled in 3 days if payment is not updated

Create next-generation digital products

Build faster with our platform

Get Started →

src/components/banner-destructive-demo.tsx

import { Banner } from "@/components/billingsdk/banner";

export default function FreeTrialBannerDemo() {
  return (
    <div className="bg-background-secondary flex h-full min-h-[500px] w-full flex-col gap-6 overflow-hidden rounded-lg border-2">
      <Banner
        title="⚠️ Payment Failed - Subscription Suspended"
        description="Your subscription will be canceled in 3 days if payment is not updated"
        buttonText="Update Payment"
        buttonLink="https://example.com/billing"
        variant="destructive"
      />

      {/* minimal hero example */}
      <section className="flex flex-col items-center justify-center gap-4 py-16 text-center">
        <h1 className="text-foreground-secondary text-3xl font-bold tracking-tight">
          Create next-generation digital products
        </h1>
        <div className="flex flex-col gap-2">
          <p className="text-muted-foreground max-w-md">
            Build faster with our platform
          </p>
          <a className="hover:text-primary underline underline-offset-4 transition">
            Get Started →
          </a>
        </div>
      </section>
    </div>
  );
}

⚠️ System Maintenance Scheduled

Our services will be temporarily unavailable on Sunday, 2AM-4AM UTC for scheduled maintenance

System Status Dashboard

Monitor system health and maintenance schedules

View Status →

src/components/banner-warning-demo.tsx

import { Banner } from "@/components/billingsdk/banner";

export default function BannerWarningDemo() {
  return (
    <div className="bg-background-secondary flex h-full min-h-[500px] w-full flex-col gap-6 overflow-hidden rounded-lg border-2">
      <Banner
        title="⚠️ System Maintenance Scheduled"
        description="Our services will be temporarily unavailable on Sunday, 2AM-4AM UTC for scheduled maintenance"
        buttonText="Learn More"
        buttonLink="https://example.com/maintenance"
        variant="warning"
      />

      {/* minimal hero example */}
      <section className="flex flex-col items-center justify-center gap-4 py-16 text-center">
        <h1 className="text-foreground-secondary text-3xl font-bold tracking-tight">
          System Status Dashboard
        </h1>
        <div className="flex flex-col gap-2">
          <p className="text-muted-foreground max-w-md">
            Monitor system health and maintenance schedules
          </p>
          <a className="hover:text-primary underline underline-offset-4 transition">
            View Status →
          </a>
        </div>
      </section>
    </div>
  );
}

✅ Payment Processed Successfully

Your subscription has been activated and you now have access to all premium features

Welcome to Premium

Enjoy unlimited access to all features

Explore Features →

src/components/banner-success-demo.tsx

import { Banner } from "@/components/billingsdk/banner";

export default function BannerSuccessDemo() {
  return (
    <div className="bg-background-secondary flex h-full min-h-[500px] w-full flex-col gap-6 overflow-hidden rounded-lg border-2">
      <Banner
        title="✅ Payment Processed Successfully"
        description="Your subscription has been activated and you now have access to all premium features"
        buttonText="View Dashboard"
        buttonLink="https://example.com/dashboard"
        variant="success"
      />

      {/* minimal hero example */}
      <section className="flex flex-col items-center justify-center gap-4 py-16 text-center">
        <h1 className="text-foreground-secondary text-3xl font-bold tracking-tight">
          Welcome to Premium
        </h1>
        <div className="flex flex-col gap-2">
          <p className="text-muted-foreground max-w-md">
            Enjoy unlimited access to all features
          </p>
          <a className="hover:text-primary underline underline-offset-4 transition">
            Explore Features →
          </a>
        </div>
      </section>
    </div>
  );
}

ℹ️ New API Version Available

API v2.1 is now available with improved performance and new endpoints

Developer Resources

Access documentation, guides, and API references

Browse Docs →

src/components/banner-info-demo.tsx

import { Banner } from "@/components/billingsdk/banner";

export default function BannerInfoDemo() {
  return (
    <div className="bg-background-secondary flex h-full min-h-[500px] w-full flex-col gap-6 overflow-hidden rounded-lg border-2">
      <Banner
        title="ℹ️ New API Version Available"
        description="API v2.1 is now available with improved performance and new endpoints"
        buttonText="View Docs"
        buttonLink="https://example.com/api-docs"
        variant="info"
      />

      {/* minimal hero example */}
      <section className="flex flex-col items-center justify-center gap-4 py-16 text-center">
        <h1 className="text-foreground-secondary text-3xl font-bold tracking-tight">
          Developer Resources
        </h1>
        <div className="flex flex-col gap-2">
          <p className="text-muted-foreground max-w-md">
            Access documentation, guides, and API references
          </p>
          <a className="hover:text-primary underline underline-offset-4 transition">
            Browse Docs →
          </a>
        </div>
      </section>
    </div>
  );
}

🚀 Introducing Advanced Analytics

Get deeper insights into your billing data with our new analytics dashboard

Advanced Analytics

Powerful insights to grow your business

Get Started →

src/components/banner-announcement-demo.tsx

import { Banner } from "@/components/billingsdk/banner";

export default function BannerAnnouncementDemo() {
  return (
    <div className="bg-background-secondary flex h-full min-h-[500px] w-full flex-col gap-6 overflow-hidden rounded-lg border-2">
      <Banner
        title="🚀 Introducing Advanced Analytics"
        description="Get deeper insights into your billing data with our new analytics dashboard"
        buttonText="Explore Now"
        buttonLink="https://example.com/analytics"
        variant="announcement"
      />

      {/* minimal hero example */}
      <section className="flex flex-col items-center justify-center gap-4 py-16 text-center">
        <h1 className="text-foreground-secondary text-3xl font-bold tracking-tight">
          Advanced Analytics
        </h1>
        <div className="flex flex-col gap-2">
          <p className="text-muted-foreground max-w-md">
            Powerful insights to grow your business
          </p>
          <a className="hover:text-primary underline underline-offset-4 transition">
            Get Started →
          </a>
        </div>
      </section>
    </div>
  );
}

Usage

import { Banner } from "@/components/billingsdk/banner";

// Default Banner
<Banner
  title="🎉 Start your free trial today!"
  description="Get 30 days free access to all premium features"
  buttonText="Start Free Trial"
  buttonIcon={<Rocket />}
  buttonLink="https://example.com/signup"
  variant="default" // default, minimal, popup
/>

// Minimal Banner
<Banner
  title="🎉 Start your free trial today!"
  description="Get 30 days free access to all premium features"
  variant="minimal" // default, minimal, popup
/>

// Popup Banner
<Banner
  title="🎉 Start your free trial today!"
  description="Get 30 days free access to all premium features"
  variant="popup" // default, minimal, popup
/>

// Gradient Banner
<Banner
  title="🌈 Experience the magic of gradients!"
  description="Beautiful animated gradient background with custom colors"
  buttonText="Learn More"
  buttonLink="https://example.com/gradients"
  variant="default"
  gradientColors={[
    "rgba(0,149,255,0.56)",
    "rgba(231,77,255,0.77)",
    "rgba(255,0,0,0.73)",
    "rgba(131,255,166,0.66)"
  ]}
/>

// Destructive Banner
<Banner
  title="⚠️ Payment Failed - Subscription Suspended"
  description="Your subscription will be canceled in 3 days if payment is not updated"
  buttonText="Update Payment"
  buttonLink="https://example.com/billing"
  variant="destructive"
/>

// Warning Banner
<Banner
  title="⚠️ System Maintenance Scheduled"
  description="Our services will be temporarily unavailable on Sunday, 2AM-4AM UTC"
  buttonText="Learn More"
  buttonLink="https://example.com/maintenance"
  variant="warning"
/>

// Success Banner
<Banner
  title="✅ Payment Processed Successfully"
  description="Your subscription has been activated and you now have access to all premium features"
  buttonText="View Dashboard"
  buttonLink="https://example.com/dashboard"
  variant="success"
/>

// Info Banner
<Banner
  title="ℹ️ New API Version Available"
  description="API v2.1 is now available with improved performance and new endpoints"
  buttonText="View Docs"
  buttonLink="https://example.com/api-docs"
  variant="info"
/>

// Announcement Banner
<Banner
  title="🚀 Introducing Advanced Analytics"
  description="Get deeper insights into your billing data with our new analytics dashboard"
  buttonText="Explore Now"
  buttonLink="https://example.com/analytics"
  variant="announcement"
/>

Props

Prop	Type	Required	Description
`className`	`string`	❌	Additional CSS classes for styling
`title`	`string`	✅	The title of the banner
`description`	`string`	❌	The description of the banner
`buttonText`	`string`	❌	The text of the button
`buttonIcon`	`React.ReactNode`	❌	The icon of the button
`buttonLink`	`string`	❌	The link of the button
`variant`	`"default" \| "minimal" \| "popup" \| "destructive" \| "warning" \| "success" \| "info" \| "announcement"`	✅	The variant of the banner
`autoDismiss`	`number`	❌	The time in milliseconds to auto dismiss the banner
`onDismiss`	`() => void`	❌	The function to call when the banner is dismissed
`gradientColors`	`string[]`	❌	Array of color strings for animated gradient background

Gradient Colors

The gradientColors prop accepts an array of color strings (preferably in rgba format with alpha transparency). The gradient creates a smooth animated background effect.

Color Guidelines:

Use rgba colors with alpha values between 0.5-0.8 for best results
Colors are automatically filtered for optimal contrast in both themes
The gradient animation uses a 70-degree angle for a diagonal effect

Example

src/components/banner-demo.tsx

import { Banner } from "@/components/billingsdk/banner";

export default function FreeTrialBannerDemo() {
  return (
    <div className="bg-background-secondary flex h-full min-h-[500px] w-full flex-col gap-6 overflow-hidden rounded-lg border-2">
      <Banner
        title="🎉 Start your free trial today!"
        description="Get 30 days free access to all premium features"
        buttonText="Start Free Trial"
        buttonLink="https://example.com/signup"
        variant="default" // default, minimal, popup
      />

      {/* minimal hero example */}
      <section className="flex flex-col items-center justify-center gap-4 py-16 text-center">
        <h1 className="text-foreground-secondary text-3xl font-bold tracking-tight">
          Create next-generation digital products
        </h1>
        <div className="flex flex-col gap-2">
          <p className="text-muted-foreground max-w-md">
            Build faster with our platform
          </p>
          <a className="hover:text-primary underline underline-offset-4 transition">
            Get Started →
          </a>
        </div>
      </section>
    </div>
  );
}

Top BannerPlaygroundCopy Page

Create next-generation digital products

Discover the best places to visit in the world

Default Banner

Minimal Banner

Popup Banner

Create next-generation digital products

System Status Dashboard

Welcome to Premium

Developer Resources

Advanced Analytics

Top Banner
Playground