# Banner 5

> Banner

A shadcn/ui block from the [@cnippet-blocks](https://blocks.cnippet.dev/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/cnippet-blocks/banner-5).

- Page, with a live preview: https://shadcn.exchange/r/cnippet-blocks/banner-5
- Screenshot: https://shadcn.exchange/shot/cnippet-blocks/banner-5/light.png
- Registry item: https://blocks.cnippet.dev/r/banner-5.json
- Categories: banner
- Listed: 2026-11-01, source last changed 2026-11-01

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/cnippet-blocks/banner-5.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `lucide-react`
- Registry items: `@cnippet/button`

## Files

### `registry/default/sections/banner-5.tsx`

```tsx
"use client";

import { X, Zap } from "lucide-react";
import { useState } from "react";

import { Button } from "@/components/ui/button";

export default function Banner03() {
  const [isVisible, setIsVisible] = useState(true);

  if (!isVisible) {
    return null;
  }

  return (
    <div className="my-10 w-full overflow-hidden bg-linear-to-r from-amber-100 to-orange-500 dark:from-amber-600 dark:to-orange-600">
      <div className="flex items-center gap-4 px-6 py-2">
        <div className="rounded-lg bg-white p-2.5 dark:bg-white/10 dark:backdrop-blur">
          <Zap className="h-5 w-5 text-amber-700 dark:text-yellow-300" />
        </div>

        <div className="flex-1">
          <h3 className="font-semibold text-amber-900 text-sm dark:text-white">
            Upgrade to Premium
          </h3>
          <p className="mt-0.5 text-amber-800 text-xs dark:text-amber-50">
            Unlock unlimited features and priority support for your team.
          </p>
        </div>

        <div className="flex items-center gap-2">
          <Button
            className="bg-white text-amber-700 hover:bg-amber-50 dark:border-0 dark:bg-white/20 dark:text-white dark:hover:bg-white/30"
            size="sm"
            variant="secondary"
          >
            Learn more
          </Button>
          <Button
            className="bg-yellow-300 text-black hover:bg-yellow-400 dark:bg-white/90 dark:text-amber-700 dark:hover:bg-white"
            size="sm"
          >
            Upgrade
          </Button>
        </div>

        <button
          className="shrink-0 p-1 text-white hover:text-white dark:text-white/60 dark:hover:text-white"
          onClick={() => setIsVisible(false)}
        >
          <X className="h-4 w-4" />
        </button>
      </div>
    </div>
  );
}
```