---
title: Footer
description: Footer layouts for links, context, and a final action.
group: Blocks
order: 25
---

Footers that close out a page without making a fuss. Replace the links and details with your own.

## Multi-column

A logo, short introduction, three link columns, and a legal row.

```tsx
"use client";

import { Logo } from "@/components/brand";
import { cn } from "@/lib/utils";

type Footer01Props = {
  className?: string;
};

const COLUMNS = [
  {
    title: "Product",
    links: ["Blocks", "Components", "Changelog", "Pricing"],
  },
  {
    title: "Company",
    links: ["About", "Blog", "Careers", "Contact"],
  },
  {
    title: "Resources",
    links: ["Docs", "Guides", "Support", "Status"],
  },
] as const;

export function Footer01({ className }: Footer01Props) {
  return (
    <footer className={cn("@container w-full bg-background", className)}>
      <div className="mx-auto w-full max-w-5xl px-4 py-10 @[32rem]:px-6 @[32rem]:py-14">
        <div className="flex flex-col gap-10 @[40rem]:flex-row @[40rem]:justify-between">
          <div className="max-w-xs">
            <Logo className="block h-4 w-auto text-foreground" />
            <p className="mt-4 text-sm tracking-wide text-muted-foreground">
              UI blocks and components for shipping polished product surfaces.
            </p>
          </div>

          <div className="grid grid-cols-2 gap-8 @[32rem]:grid-cols-3 @[40rem]:gap-12">
            {COLUMNS.map((column) => (
              <div key={column.title}>
                <p className="text-sm font-medium tracking-wide text-foreground">
                  {column.title}
                </p>
                <ul className="mt-3 flex flex-col gap-2">
                  {column.links.map((link) => (
                    <li key={link}>
                      <a
                        href="#"
                        className="text-sm tracking-wide text-muted-foreground"
                      >
                        {link}
                      </a>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>

        <div className="mt-10 flex flex-col gap-2 border-t border-border pt-6 @[32rem]:flex-row @[32rem]:items-center @[32rem]:justify-between">
          <p className="text-xs tracking-wide text-muted-foreground">
            © 2026 Arctis. All rights reserved.
          </p>
          <div className="flex flex-wrap gap-4">
            <a href="#" className="text-xs tracking-wide text-muted-foreground">
              Privacy
            </a>
            <a href="#" className="text-xs tracking-wide text-muted-foreground">
              Terms
            </a>
          </div>
        </div>
      </div>
    </footer>
  );
}
```

### Installation

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

### Usage

```tsx
import { Footer01 } from "@/components/blocks/footer/footer-01"
```

```tsx
<Footer01 />
```

## Compact centered

A compact, centered logo with navigation and one copyright line.

```tsx
"use client";

import { Logo } from "@/components/brand";
import { cn } from "@/lib/utils";

type Footer02Props = {
  className?: string;
};

const LINKS = ["Product", "Docs", "Pricing", "Blog", "Contact"] as const;

export function Footer02({ className }: Footer02Props) {
  return (
    <footer className={cn("@container w-full bg-background", className)}>
      <div className="mx-auto flex w-full max-w-3xl flex-col items-center gap-6 px-4 py-10 text-center @[32rem]:px-6 @[32rem]:py-14">
        <Logo className="block h-4 w-auto text-foreground" />
        <nav className="flex flex-wrap items-center justify-center gap-x-5 gap-y-2">
          {LINKS.map((link) => (
            <a
              key={link}
              href="#"
              className="text-sm tracking-wide text-muted-foreground"
            >
              {link}
            </a>
          ))}
        </nav>
        <p className="text-xs tracking-wide text-muted-foreground">
          © 2026 Arctis · Built for teams that ship UI
        </p>
      </div>
    </footer>
  );
}
```

### Installation

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

### Usage

```tsx
import { Footer02 } from "@/components/blocks/footer/footer-02"
```

```tsx
<Footer02 />
```

## Image panel

A footer CTA and links set over a cover image with a dark overlay.

```tsx
"use client";

import { Logo } from "@/components/brand";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

type Footer03Props = {
  className?: string;
};

const LINKS = ["Blocks", "Components", "Docs", "Pricing"] as const;

export function Footer03({ className }: Footer03Props) {
  return (
    <footer className={cn("@container w-full bg-background", className)}>
      <div className="mx-auto w-full max-w-5xl px-4 py-10 @[32rem]:px-6 @[32rem]:py-14">
        <div className="relative min-h-[22rem] overflow-hidden rounded-xl @[32rem]:min-h-[26rem]">
          <img
            src="/assets/brand/demos/card-cover.png"
            alt=""
            className="absolute inset-0 size-full object-cover"
          />
          <div aria-hidden="true" className="absolute inset-0 bg-black/55" />

          <div className="relative z-10 flex h-full min-h-[22rem] flex-col justify-between px-6 py-6 @[32rem]:min-h-[26rem] @[32rem]:px-10 @[32rem]:py-8">
            <Logo className="block h-4 w-auto self-start text-white" />

            <div className="flex flex-col gap-8">
              <div className="flex flex-col gap-6 @[40rem]:flex-row @[40rem]:items-end @[40rem]:justify-between">
                <div className="max-w-md">
                  <h2 className="text-2xl font-medium tracking-wide text-white @[32rem]:text-3xl">
                    Ship pages that feel finished
                  </h2>
                  <p className="mt-3 text-sm tracking-wide text-white/75">
                    Drop in blocks, restyle with your tokens, and keep moving.
                  </p>
                </div>
                <Button type="button" size="sm">
                  Get started
                </Button>
              </div>

              <div className="flex flex-col gap-4 border-t border-white/20 pt-6 @[40rem]:flex-row @[40rem]:items-center @[40rem]:justify-between">
                <nav className="flex flex-wrap gap-x-5 gap-y-2">
                  {LINKS.map((link) => (
                    <a
                      key={link}
                      href="#"
                      className="text-sm tracking-wide text-white/80"
                    >
                      {link}
                    </a>
                  ))}
                </nav>
                <p className="text-xs tracking-wide text-white/60">
                  © 2026 Arctis. All rights reserved.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}
```

### Installation

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

### Usage

```tsx
import { Footer03 } from "@/components/blocks/footer/footer-03"
```

```tsx
<Footer03 />
```