Footer — ARC UI

Components

Footer

navigation

static

<arc-footer>

Overview

Guidelines

When to use

Place the footer as the last child of your page layout or AppShell
Use the logo slot for your brand mark or wordmark — keep it compact
Organize link columns by category (Product, Company, Resources) for scannability
Include essential legal text (copyright year, company name) in the legal slot
Use the compact variant inside admin shells and dashboards to save vertical space
Keep link column headings short and consistent in casing

When not to use

Nest interactive widgets (forms, modals) inside the footer — keep it navigational
Use more than four or five link columns; too many columns overwhelm on smaller screens
Remove the border prop on pages with light backgrounds — the separator aids readability
Duplicate primary navigation in the footer verbatim; footer nav should be a curated subset
Place critical call-to-action buttons in the footer — they belong above the fold
Omit a copyright notice; legal requires it for most commercial products

Features

Slot-based composition with logo, default (columns), social, and legal regions
Responsive CSS Grid columns that auto-wrap without manual breakpoints
Compact mode for dashboards and space-constrained layouts
Optional top border to separate footer from page content
Dark background with muted text for clear visual hierarchy
Legal section with its own subtle top divider for copyright and policy links
CSS custom property theming via design tokens
Shadow DOM encapsulation with ::part() hooks for targeted styling

Preview

ARC UI

Product

Company

Resources

Usage

<script type="module" src="@arclux/arc-ui"></script>

<arc-footer border>
  <div slot="logo"><strong>ARC UI</strong></div>

  <div>
    <p><strong>Product</strong></p>
    <ul>
      <li><a href="/docs/components">Components</a></li>
      <li><a href="/docs/tokens">Tokens</a></li>
      <li><a href="/docs/changelog">Changelog</a></li>
    </ul>
  </div>
  <div>
    <p><strong>Company</strong></p>
    <ul>
      <li><a href="/about">About</a></li>
      <li><a href="/blog">Blog</a></li>
      <li><a href="/careers">Careers</a></li>
    </ul>
  </div>
  <div>
    <p><strong>Resources</strong></p>
    <ul>
      <li><a href="/docs">Documentation</a></li>
      <li><a href="/github">GitHub</a></li>
      <li><a href="/support">Support</a></li>
    </ul>
  </div>

  <div slot="legal">&copy; 2026 ARC UI. All rights reserved.</div>
</arc-footer>

import { Footer } from '@arclux/arc-ui-react';

export function SiteFooter() {
  return (
    <Footer border>
      <div slot="logo"><strong>ARC UI</strong></div>

      <div>
        <p><strong>Product</strong></p>
        <ul>
          <li><a href="/docs/components">Components</a></li>
          <li><a href="/docs/tokens">Tokens</a></li>
          <li><a href="/docs/changelog">Changelog</a></li>
        </ul>
      </div>
      <div>
        <p><strong>Company</strong></p>
        <ul>
          <li><a href="/about">About</a></li>
          <li><a href="/blog">Blog</a></li>
          <li><a href="/careers">Careers</a></li>
        </ul>
      </div>
      <div>
        <p><strong>Resources</strong></p>
        <ul>
          <li><a href="/docs">Documentation</a></li>
          <li><a href="/github">GitHub</a></li>
          <li><a href="/support">Support</a></li>
        </ul>
      </div>

      <div slot="legal">&copy; 2026 ARC UI. All rights reserved.</div>
    </Footer>
  );
}

<script setup>
import { Footer } from '@arclux/arc-ui-vue';
</script>

<template>
  <Footer border>
    <div slot="logo"><strong>ARC UI</strong></div>

    <div>
      <p><strong>Product</strong></p>
      <ul>
        <li><a href="/docs/components">Components</a></li>
        <li><a href="/docs/tokens">Tokens</a></li>
        <li><a href="/docs/changelog">Changelog</a></li>
      </ul>
    </div>
    <div>
      <p><strong>Company</strong></p>
      <ul>
        <li><a href="/about">About</a></li>
        <li><a href="/blog">Blog</a></li>
        <li><a href="/careers">Careers</a></li>
      </ul>
    </div>
    <div>
      <p><strong>Resources</strong></p>
      <ul>
        <li><a href="/docs">Documentation</a></li>
        <li><a href="/github">GitHub</a></li>
        <li><a href="/support">Support</a></li>
      </ul>
    </div>

    <div slot="legal">&copy; 2026 ARC UI. All rights reserved.</div>
  </Footer>
</template>

<script>
  import { Footer } from '@arclux/arc-ui-svelte';
</script>

<Footer border>
  <div slot="logo"><strong>ARC UI</strong></div>

  <div>
    <p><strong>Product</strong></p>
    <ul>
      <li><a href="/docs/components">Components</a></li>
      <li><a href="/docs/tokens">Tokens</a></li>
      <li><a href="/docs/changelog">Changelog</a></li>
    </ul>
  </div>
  <div>
    <p><strong>Company</strong></p>
    <ul>
      <li><a href="/about">About</a></li>
      <li><a href="/blog">Blog</a></li>
      <li><a href="/careers">Careers</a></li>
    </ul>
  </div>
  <div>
    <p><strong>Resources</strong></p>
    <ul>
      <li><a href="/docs">Documentation</a></li>
      <li><a href="/github">GitHub</a></li>
      <li><a href="/support">Support</a></li>
    </ul>
  </div>

  <div slot="legal">&copy; 2026 ARC UI. All rights reserved.</div>
</Footer>

import { Component } from '@angular/core';
import { Footer } from '@arclux/arc-ui-angular';

@Component({
  imports: [Footer],
  template: `
    <Footer border>
      <div slot="logo"><strong>ARC UI</strong></div>

      <div>
        <p><strong>Product</strong></p>
        <ul>
          <li><a href="/docs/components">Components</a></li>
          <li><a href="/docs/tokens">Tokens</a></li>
          <li><a href="/docs/changelog">Changelog</a></li>
        </ul>
      </div>
      <div>
        <p><strong>Company</strong></p>
        <ul>
          <li><a href="/about">About</a></li>
          <li><a href="/blog">Blog</a></li>
          <li><a href="/careers">Careers</a></li>
        </ul>
      </div>
      <div>
        <p><strong>Resources</strong></p>
        <ul>
          <li><a href="/docs">Documentation</a></li>
          <li><a href="/github">GitHub</a></li>
          <li><a href="/support">Support</a></li>
        </ul>
      </div>

      <div slot="legal">&copy; 2026 ARC UI. All rights reserved.</div>
    </Footer>
  `,
})
export class SiteFooterComponent {}

import { Footer } from '@arclux/arc-ui-solid';

export function SiteFooter() {
  return (
    <Footer border>
      <div slot="logo"><strong>ARC UI</strong></div>

      <div>
        <p><strong>Product</strong></p>
        <ul>
          <li><a href="/docs/components">Components</a></li>
          <li><a href="/docs/tokens">Tokens</a></li>
          <li><a href="/docs/changelog">Changelog</a></li>
        </ul>
      </div>
      <div>
        <p><strong>Company</strong></p>
        <ul>
          <li><a href="/about">About</a></li>
          <li><a href="/blog">Blog</a></li>
          <li><a href="/careers">Careers</a></li>
        </ul>
      </div>
      <div>
        <p><strong>Resources</strong></p>
        <ul>
          <li><a href="/docs">Documentation</a></li>
          <li><a href="/github">GitHub</a></li>
          <li><a href="/support">Support</a></li>
        </ul>
      </div>

      <div slot="legal">&copy; 2026 ARC UI. All rights reserved.</div>
    </Footer>
  );
}

import { Footer } from '@arclux/arc-ui-preact';

export function SiteFooter() {
  return (
    <Footer border>
      <div slot="logo"><strong>ARC UI</strong></div>

      <div>
        <p><strong>Product</strong></p>
        <ul>
          <li><a href="/docs/components">Components</a></li>
          <li><a href="/docs/tokens">Tokens</a></li>
          <li><a href="/docs/changelog">Changelog</a></li>
        </ul>
      </div>
      <div>
        <p><strong>Company</strong></p>
        <ul>
          <li><a href="/about">About</a></li>
          <li><a href="/blog">Blog</a></li>
          <li><a href="/careers">Careers</a></li>
        </ul>
      </div>
      <div>
        <p><strong>Resources</strong></p>
        <ul>
          <li><a href="/docs">Documentation</a></li>
          <li><a href="/github">GitHub</a></li>
          <li><a href="/support">Support</a></li>
        </ul>
      </div>

      <div slot="legal">&copy; 2026 ARC UI. All rights reserved.</div>
    </Footer>
  );
}

<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-footer — requires footer.css + base.css (or arc-ui.css) -->
<div class="arc-footer">
  <footer class="footer">
   <div class="footer__brand">
    <strong>ARC UI</strong>
   </div>
   <div class="footer__columns">
    <div>
      <p><strong>Product</strong></p>
      <ul>
        <li><a href="/docs/components">Components</a></li>
        <li><a href="/docs/tokens">Tokens</a></li>
        <li><a href="/docs/changelog">Changelog</a></li>
      </ul>
    </div>
    <div>
      <p><strong>Company</strong></p>
      <ul>
        <li><a href="/about">About</a></li>
        <li><a href="/blog">Blog</a></li>
        <li><a href="/careers">Careers</a></li>
      </ul>
    </div>
    <div>
      <p><strong>Resources</strong></p>
      <ul>
        <li><a href="/docs">Documentation</a></li>
        <li><a href="/github">GitHub</a></li>
        <li><a href="/support">Support</a></li>
      </ul>
    </div>
   </div>
   <div class="footer__social">

   </div>
   <div class="footer__legal">
    &copy; 2026 ARC UI. All rights reserved.
   </div>
   </footer>
</div>

<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-footer — self-contained, no external CSS needed -->
<div class="arc-footer" style="display: block; background: rgb(3, 3, 7); color: rgb(138, 138, 150); font-family: 'Host Grotesk', system-ui, sans-serif; font-size: clamp(15px, 1.2vw, 16px)">
  <footer style="padding: 64px 40px 40px; border-top: 1px solid rgb(24, 24, 30)">
   <div style="margin-bottom: 40px">
    <strong style="color: rgb(232, 232, 236); font-size: 18px">ARC UI</strong>
   </div>
   <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 40px; margin-bottom: 40px">
    <div>
      <p style="margin: 0 0 12px; font-weight: 600; color: rgb(232, 232, 236); font-size: 13px; text-transform: uppercase; letter-spacing: 1px">Product</p>
      <ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px">
        <li><a href="/docs/components" style="color: rgb(138, 138, 150); text-decoration: none">Components</a></li>
        <li><a href="/docs/tokens" style="color: rgb(138, 138, 150); text-decoration: none">Tokens</a></li>
        <li><a href="/docs/changelog" style="color: rgb(138, 138, 150); text-decoration: none">Changelog</a></li>
      </ul>
    </div>
    <div>
      <p style="margin: 0 0 12px; font-weight: 600; color: rgb(232, 232, 236); font-size: 13px; text-transform: uppercase; letter-spacing: 1px">Company</p>
      <ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px">
        <li><a href="/about" style="color: rgb(138, 138, 150); text-decoration: none">About</a></li>
        <li><a href="/blog" style="color: rgb(138, 138, 150); text-decoration: none">Blog</a></li>
        <li><a href="/careers" style="color: rgb(138, 138, 150); text-decoration: none">Careers</a></li>
      </ul>
    </div>
    <div>
      <p style="margin: 0 0 12px; font-weight: 600; color: rgb(232, 232, 236); font-size: 13px; text-transform: uppercase; letter-spacing: 1px">Resources</p>
      <ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px">
        <li><a href="/docs" style="color: rgb(138, 138, 150); text-decoration: none">Documentation</a></li>
        <li><a href="/github" style="color: rgb(138, 138, 150); text-decoration: none">GitHub</a></li>
        <li><a href="/support" style="color: rgb(138, 138, 150); text-decoration: none">Support</a></li>
      </ul>
    </div>
   </div>
   <div style="display: flex; align-items: center; gap: 16px; margin-bottom: 24px">

   </div>
   <div style="padding-top: 16px; border-top: 1px solid rgb(24, 24, 30); color: rgb(124, 124, 137); font-size: 12px">
    &copy; 2026 ARC UI. All rights reserved.
   </div>
   </footer>
</div>

API

Prop	Type	Default	Description
`compact`	`boolean`	`false`	Reduces internal padding and spacing throughout the footer. Use this in dashboard layouts or admin panels where vertical space is limited and the footer should feel lightweight rather than expansive.
`border`	`boolean`	`true`	Renders a subtle top border on the footer to visually separate it from the page content above. Enabled by default; disable it only when the footer sits against a dark background where the border would be redundant.
`contained`	`string`	`''`	Sets a max-width containment on the footer content. Accepts any CSS length value or named size token.
`align`	`string`	`'left'`	Controls footer content alignment. Options: 'left', 'center'.

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

See Also

ARC UI

Arclight