---
title: Banner
description: Banners for notices, updates, and timely actions.
group: Blocks
order: 12
---

A few ways to put an update or announcement where it will be seen. Choose one and make the message yours.

## With action

A clear title, a little context, and a secondary action.

```tsx
"use client";

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

export function Banner01() {
  return (
    <div className="flex w-full flex-col gap-3 rounded-md bg-muted px-4 py-3 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
      <div className="min-w-0">
        <p className="text-sm tracking-wide text-foreground">
          New blocks are live
        </p>
        <p className="mt-0.5 text-xs tracking-wide text-muted-foreground">
          Copy ready made layouts into your app and restyle them with your
          tokens.
        </p>
      </div>
      <Button size="sm" variant="secondary" className="shrink-0 self-start sm:self-auto">
        Browse blocks
      </Button>
    </div>
  );
}
```

### Installation

```bash
npx @arctis-sh/@arctis-sh/ui@latest add banner-01
```

### Usage

```tsx
import { Banner01 } from "@/components/blocks/banner/banner-01"
```

```tsx
<Banner01 />
```

## Dismissible

The same compact layout, with a close control when the notice is optional.

```tsx
"use client";

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

function CloseIcon({ className }: { className?: string }) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      aria-hidden="true"
      className={className}
    >
      <path
        d="M6 6l12 12M18 6L6 18"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
      />
    </svg>
  );
}

export function Banner02() {
  const [open, setOpen] = useState(true);

  if (!open) return null;

  return (
    <div className="flex w-full flex-col gap-3 rounded-md bg-muted px-4 py-3 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
      <div className="min-w-0">
        <p className="text-sm tracking-wide text-foreground">
          Shipping updates for all regions
        </p>
        <p className="mt-0.5 text-xs tracking-wide text-muted-foreground">
          Check the changelog before you ship so nothing slips through.
        </p>
      </div>
      <Button
        type="button"
        size="icon-sm"
        variant="ghost"
        aria-label="Dismiss"
        className="shrink-0 self-start sm:self-auto"
        onClick={() => setOpen(false)}
      >
        <CloseIcon />
      </Button>
    </div>
  );
}
```

### Installation

```bash
npx @arctis-sh/@arctis-sh/ui@latest add banner-02
```

### Usage

```tsx
import { Banner02 } from "@/components/blocks/banner/banner-02"
```

```tsx
<Banner02 />
```

## Action and dismiss

An action and a close control, so the notice can be handled or dismissed.

```tsx
"use client";

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

function CloseIcon({ className }: { className?: string }) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      aria-hidden="true"
      className={className}
    >
      <path
        d="M6 6l12 12M18 6L6 18"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
      />
    </svg>
  );
}

export function Banner03() {
  const [open, setOpen] = useState(true);

  if (!open) return null;

  return (
    <div className="flex w-full flex-col gap-3 rounded-md bg-muted px-4 py-3 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
      <div className="min-w-0">
        <p className="text-sm tracking-wide text-foreground">
          Maintenance window this Sunday
        </p>
        <p className="mt-0.5 text-xs tracking-wide text-muted-foreground">
          Expect a short pause around midnight while we roll out the next cut.
        </p>
      </div>
      <div className="flex shrink-0 items-center gap-1 self-start sm:self-auto">
        <Button size="sm" variant="secondary">
          View schedule
        </Button>
        <Button
          type="button"
          size="icon-sm"
          variant="ghost"
          aria-label="Dismiss"
          onClick={() => setOpen(false)}
        >
          <CloseIcon />
        </Button>
      </div>
    </div>
  );
}
```

### Installation

```bash
npx @arctis-sh/@arctis-sh/ui@latest add banner-03
```

### Usage

```tsx
import { Banner03 } from "@/components/blocks/banner/banner-03"
```

```tsx
<Banner03 />
```

## With icon

A leading icon, title, supporting line, and secondary action.

```tsx
"use client";

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

function InfoIcon({ className }: { className?: string }) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      aria-hidden="true"
      className={className}
    >
      <circle
        cx="12"
        cy="12"
        r="9"
        stroke="currentColor"
        strokeWidth="1.5"
      />
      <path
        d="M12 11v5M12 8h.01"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
      />
    </svg>
  );
}

export function Banner04() {
  return (
    <div className="flex w-full flex-col gap-3 rounded-md bg-muted px-4 py-3 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
      <div className="flex min-w-0 gap-3">
        <InfoIcon className="mt-0.5 size-4 shrink-0 text-foreground" />
        <div className="min-w-0">
          <p className="text-sm tracking-wide text-foreground">
            API keys rotate next week
          </p>
          <p className="mt-0.5 text-xs tracking-wide text-muted-foreground">
            Update your clients before the old keys stop working.
          </p>
        </div>
      </div>
      <Button size="sm" variant="secondary" className="shrink-0 self-start sm:self-auto">
        Read guide
      </Button>
    </div>
  );
}
```

### Installation

```bash
npx @arctis-sh/@arctis-sh/ui@latest add banner-04
```

### Usage

```tsx
import { Banner04 } from "@/components/blocks/banner/banner-04"
```

```tsx
<Banner04 />
```

## Full bleed strip

An edge-to-edge bar for short, sitewide announcements.

```tsx
"use client";

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

export function Banner05() {
  return (
    <div className="@container w-full border-b border-border bg-secondary">
      <div className="flex w-full flex-col items-center gap-2 px-4 py-2.5 text-center @[32rem]:flex-row @[32rem]:justify-center @[32rem]:gap-3">
        <p className="text-sm tracking-wide text-secondary-foreground">
          Arctis UI v2 is out.{" "}
          <span className="text-secondary-foreground/70">
            New blocks, tokens, and docs.
          </span>
        </p>
        <Button
          size="sm"
          variant="ghost"
          className="h-7 shrink-0 text-secondary-foreground hover:bg-secondary-foreground/10 hover:text-secondary-foreground"
        >
          See what's new
        </Button>
      </div>
    </div>
  );
}
```

### Installation

```bash
npx @arctis-sh/@arctis-sh/ui@latest add banner-05
```

### Usage

```tsx
import { Banner05 } from "@/components/blocks/banner/banner-05"
```

```tsx
<Banner05 />
```