You can change the variant of the banner to default, minimal, or popup.

🎉 Start your free trial today!

Get 30 days free access to all premium features

Create next-generation digital products

Build faster with our platform

src/components/banner-demo.tsx

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

export default function FreeTrialBannerDemo() {
    return (
        <div className="w-full h-full flex flex-col gap-6 min-h-[500px] rounded-lg overflow-hidden bg-background-secondary 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 text-center gap-4 py-16">
                <h1 className="text-3xl font-bold tracking-tight text-foreground-secondary">
                    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="underline underline-offset-4 hover:text-primary transition"
                    >
                        Get Started →
                    </a>
                </div>
            </section>
        </div>
    )
}

Installation

npx shadcn@latest add @billingsdk/banner

pnpm dlx shadcn@latest add @billingsdk/banner

npx shadcn@latest add @billingsdk/banner

npx @billingsdk/cli add banner

pnpm dlx @billingsdk/cli add banner

npx @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="w-full h-full flex flex-col gap-6 min-h-[500px] border rounded-lg overflow-hidden bg-background-secondary 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 text-center gap-4 py-16">
                <h1 className="text-3xl font-bold tracking-tight text-foreground-secondary">
                    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="underline underline-offset-4 hover:text-primary 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="w-full h-full flex flex-col gap-4 min-h-[500px] justify-center items-center border rounded-lg">
            {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="w-full h-full justify-center items-center flex flex-row 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="w-full h-full flex flex-col gap-6 min-h-[500px] rounded-lg overflow-hidden bg-background-secondary 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 text-center gap-4 py-16">
        <h1 className="text-3xl font-bold tracking-tight text-foreground-secondary">
          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="underline underline-offset-4 hover:text-primary 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" // destructive
/>

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"`	✅	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="w-full h-full flex flex-col gap-6 min-h-[500px] rounded-lg overflow-hidden bg-background-secondary 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 text-center gap-4 py-16">
                <h1 className="text-3xl font-bold tracking-tight text-foreground-secondary">
                    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="underline underline-offset-4 hover:text-primary transition"
                    >
                        Get Started →
                    </a>
                </div>
            </section>
        </div>
    )
}

Top BannerCopy 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

Top Banner