---
title: "Footer"
description: "A four-column footer on the inverse surface, with a company block, legal links and a closing note."
kind: block
id: C-050
category: storefront
registry: "footer"
docs: "https://koten.codehive.com.co/blocks/storefront/footer"
markdown: "https://koten.codehive.com.co/md/blocks/storefront/footer.md"
install: "npx shadcn@latest add https://koten.codehive.com.co/r/footer.json"
language: en
---

# Footer · フッター

> Block C-050 in the Koten UI catalog.

A four-column footer on the inverse surface, with a company block, legal links and a closing note.

> Japanese labels in this page are documentation metadata. Keep the consumer UI in the product's language and do not add Japanese decoration unless the user asks (R-031).

## Install

Install `koten-theme` first when the project does not have Koten tokens yet. Use the runner of your project.

```bash
# Node
npx shadcn@latest add https://koten.codehive.com.co/r/footer.json

# Bun
bunx shadcn@latest add https://koten.codehive.com.co/r/footer.json
```

## Files

- `@/components/patterns/footer.tsx`
- `@/lib/koten/cn.ts`
- `@/lib/koten/format.ts`
- `@/lib/koten/intl.ts`
- `@/lib/koten/labels.ts`
- `@/lib/koten/provider.tsx`

## Composition

This block composes Koten primitives. Read the source files above before changing its anatomy.

## Examples

### Four columns

Columns stack on mobile and spread to two and four as the width grows.

```tsx
<Footer
  navLabel="Footer links"
  columns={[
    {
      id: "shop",
      title: "Shop",
      links: [
        { label: "Shipping & costs", href: "/shipping" },
        { label: "Returns", href: "/returns" },
      ],
    },
    {
      id: "support",
      title: "Support",
      links: [
        { label: "Contact", href: "/contact" },
        { label: "FAQ", href: "/faq" },
      ],
    },
  ]}
  company="HIKARI Optical Co., Ltd."
  address="2-8-1 Ginza, Chūō-ku, Tokyo"
  legal={[
    { label: "Terms", href: "/terms" },
    { label: "Privacy", href: "/privacy" },
    { label: "Accessibility", href: "/accessibility" },
  ]}
  note="Prices include tax. Images are for reference."
/>
```

## Props

| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `columns` | `readonly FooterColumn[]` | `—` | Each column defines id, title and a list of links with label and href. |
| `company` | `ReactNode` | `—` | Company name in the lower block, in light text on the inverse surface. |
| `address` | `ReactNode` | `—` | Optional address; when omitted, the lower block stays compact. |
| `legal` | `readonly FooterLink[]` | `—` | Legal links in a row, separated from the company block. |
| `note` | `ReactNode` | `—` | Price or image note, always in text with enough contrast. |
| `navLabel` | `string` | `—` | Accessible name of the <nav> holding the columns. |

## Accessibility

- Columns live in a <nav> with aria-label and each one uses a level-2 heading.
- Links keep an underline on hover and the system's visible focus ring.
- Text on the inverse surface keeps AA contrast and never drops below 12 px.
- The closing note is real text, not an image holding legal conditions.

## Sources

- Catalog page: https://koten.codehive.com.co/blocks/storefront/footer
- Markdown: https://koten.codehive.com.co/md/blocks/storefront/footer.md
- Repository: https://github.com/codehive-colombia/koten