# Banner 10 – Inline announcement link

> A minimal announcement banner for low-friction updates. Renders as simple inline text with an optional icon and link, plus a close action. Best for subtle product news or secondary announcements that shouldn't compete with primary page content.

A shadcn/ui block from the [@shadcncraft](https://shadcncraft.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcncraft/banner-10).

- Page, with a live preview: https://shadcn.exchange/r/shadcncraft/banner-10
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcncraft/banner-10-light-837c5de761c795e8.png
- Registry item: https://shadcncraft.com/r/banner-10.json
- Categories: banners
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcncraft.com/r/banner-10.json
```

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

## Dependencies

- Registry items: `button`

## Notes from the registry

Tip: browse, preview and install every shadcncraft block from your editor with the shadcncraft extension for VS Code and Cursor: https://shadcncraft.com/ide-extension

## Files

### `blocks/pro-marketing/banners/banner-10/index.tsx`

```tsx
"use client";

import { useState } from "react";

import { IconPlaceholder } from "@/registry/icons/icon-placeholder";
import { Button } from "@/components/ui/button";

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

  if (!isVisible) return null;

  return (
    // To make the banner fixed, add classes like `fixed top-0 inset-x-0 z-50` to the container element
    <aside
      role="banner"
      aria-label="Promotional banner"
      className="w-full bg-muted py-4 text-muted-foreground"
    >
      {/* Banner Container */}
      <div className="mx-auto max-w-7xl px-8">
        <div className="flex flex-row items-start justify-between gap-9 lg:items-center">
          {/* Banner Content */}
          <div className="flex flex-1 items-start gap-1">
            <IconPlaceholder
              lucide="AlertCircle"
              tabler="IconAlertCircle"
              hugeicons="Alert02Icon"
              phosphor="WarningCircleIcon"
              remixicon="RiErrorWarningLine"
              className="mt-1 size-4 shrink-0"
            />

            <p className="text-base text-pretty">
              <span className="font-semibold">New from Acme Inc: </span>
              AI Productivity Suite.{" "}
              <a href="#" className="underline">
                Check it out
              </a>
            </p>
          </div>

          {/* Close Button */}
          <Button
            size="icon-sm"
            className="size-6 shrink-0 max-lg:-mt-1 max-lg:-mr-1"
            variant="ghost"
            onClick={() => setIsVisible(false)}
            aria-label="Close banner"
          >
            <IconPlaceholder
              lucide="X"
              tabler="IconX"
              hugeicons="Cancel01Icon"
              phosphor="XIcon"
              remixicon="RiCloseLine"
            />
          </Button>
        </div>
      </div>
    </aside>
  );
}
```