# Top Banner
URL: /docs/components/banner

The Top Banner component displays a banner at the top of the page.

***

title: Top Banner
description: The Top Banner component displays a banner at the top of the page.
-------------------------------------------------------------------------------

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

## Default Banner

<Tabs items={['Preview', 'Code']} className="bg-transparent border-none">
  <Tab value="Preview" className="border-none bg-transparent p-0 mt-3">
    <PreviewComponents registryName="banner">
      <BannerDemo />
    </PreviewComponents>
  </Tab>

  <Tab value="Code" className="mt-3">
    ```tsx title="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>
      );
    }

    ```
  </Tab>
</Tabs>

## Installation

<Tabs items={['shadcn', 'billingSDK']} defaultValue="shadcn" className="bg-transparent border-none">
  <Tab value="shadcn" className="border-none bg-transparent p-0 mt-3">
    <Tabs items={['npx', 'pnpm', 'yarn', 'bun']} defaultValue="npx" groupId="installation-tabs">
      <Tab value="npx">
        ```bash
        npx shadcn@latest add @billingsdk/banner
        ```
      </Tab>

      <Tab value="pnpm">
        ```bash
        pnpm dlx shadcn@latest add @billingsdk/banner
        ```
      </Tab>

      <Tab value="yarn">
        ```bash
        yarn dlx shadcn@latest add @billingsdk/banner
        ```
      </Tab>

      <Tab value="bun">
        ```bash
        bunx shadcn@latest add @billingsdk/banner
        ```
      </Tab>
    </Tabs>
  </Tab>

  <Tab value="billingSDK" className="border-none bg-transparent p-0 mt-3">
    <Tabs items={['npx', 'pnpm', 'yarn', 'bun']} defaultValue="npx" groupId="billingsdk-cli-tabs">
      <Tab value="npx">
        ```bash
        npx @billingsdk/cli add banner
        ```
      </Tab>

      <Tab value="pnpm">
        ```bash
        pnpm dlx @billingsdk/cli add banner
        ```
      </Tab>

      <Tab value="yarn">
        ```bash
        yarn dlx @billingsdk/cli add banner
        ```
      </Tab>

      <Tab value="bun">
        ```bash
        bunx @billingsdk/cli add banner
        ```
      </Tab>
    </Tabs>
  </Tab>
</Tabs>

## Minimal Banner

<Tabs items={['Preview', 'Code']} className="bg-transparent border-none">
  <Tab value="Preview" className="border-none bg-transparent p-0 mt-3">
    <PreviewComponents registryName="banner">
      <BannerDemoTwo />
    </PreviewComponents>
  </Tab>

  <Tab value="Code" className="mt-3">
    ```tsx title="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>
      );
    }

    ```
  </Tab>
</Tabs>

## Popup Banner

<Tabs items={['Preview', 'Code']} className="bg-transparent border-none">
  <Tab value="Preview" className="border-none bg-transparent p-0 mt-3">
    <PreviewComponents registryName="banner">
      <BannerDemoThree />
    </PreviewComponents>
  </Tab>

  <Tab value="Code" className="mt-3">
    ```tsx title="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>
      );
    }

    ```
  </Tab>
</Tabs>

## Gradient Banner

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

<Tabs items={['Preview', 'Code']} className="bg-transparent border-none">
  <Tab value="Preview" className="border-none bg-transparent p-0 mt-3">
    <PreviewComponents registryName="banner">
      <BannerGradientDemo />
    </PreviewComponents>
  </Tab>

  <Tab value="Code" className="mt-3">
    ```tsx title="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>
      );
    }

    ```
  </Tab>
</Tabs>

## Destructive Banner

<Tabs items={['Preview', 'Code']} className="bg-transparent border-none">
  <Tab value="Preview" className="border-none bg-transparent p-0 mt-3">
    <PreviewComponents registryName="banner">
      <BannerDestructiveDemo />
    </PreviewComponents>
  </Tab>

  <Tab value="Code" className="mt-3">
    ```tsx title="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>
      );
    }

    ```
  </Tab>
</Tabs>

## Warning Banner

<Tabs items={['Preview', 'Code']} className="bg-transparent border-none">
  <Tab value="Preview" className="border-none bg-transparent p-0 mt-3">
    <PreviewComponents registryName="banner">
      <BannerWarningDemo />
    </PreviewComponents>
  </Tab>

  <Tab value="Code" className="mt-3">
    ```tsx title="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>
      );
    }

    ```
  </Tab>
</Tabs>

## Success Banner

<Tabs items={['Preview', 'Code']} className="bg-transparent border-none">
  <Tab value="Preview" className="border-none bg-transparent p-0 mt-3">
    <PreviewComponents registryName="banner">
      <BannerSuccessDemo />
    </PreviewComponents>
  </Tab>

  <Tab value="Code" className="mt-3">
    ```tsx title="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>
      );
    }

    ```
  </Tab>
</Tabs>

## Info Banner

<Tabs items={['Preview', 'Code']} className="bg-transparent border-none">
  <Tab value="Preview" className="border-none bg-transparent p-0 mt-3">
    <PreviewComponents registryName="banner">
      <BannerInfoDemo />
    </PreviewComponents>
  </Tab>

  <Tab value="Code" className="mt-3">
    ```tsx title="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>
      );
    }

    ```
  </Tab>
</Tabs>

## Announcement Banner

<Tabs items={['Preview', 'Code']} className="bg-transparent border-none">
  <Tab value="Preview" className="border-none bg-transparent p-0 mt-3">
    <PreviewComponents registryName="banner">
      <BannerAnnouncementDemo />
    </PreviewComponents>
  </Tab>

  <Tab value="Code" className="mt-3">
    ```tsx title="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>
      );
    }

    ```
  </Tab>
</Tabs>

## Usage

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

```tsx
// 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
/>
```

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

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

```tsx
// 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)"
  ]}
/>
```

```tsx
// 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"
/>
```

```tsx
// 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"
/>
```

```tsx
// 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"
/>
```

```tsx
// 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"
/>
```

```tsx
// 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

```tsx title="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>
  );
}

```