# Footer Minimal

One quiet row: brand, a few links and the year.

**Kind:** section · Footer  
**Styles:** Minimal, Light  
**Built from:** plain Tailwind  
**Live preview:** https://charcoalui.com/preview/section/footer-minimal

## Install

```bash
npx shadcn@latest add https://charcoalui.com/r/footer-minimal.json
```
Lands in `components/sections/footer-minimal.tsx` and installs every component it uses.

## Props (all optional, for your copy)

```ts
export type FooterMinimalProps = {
  brand?: string;
  links?: string[];
};
```

## Source

```tsx
export type FooterMinimalProps = {
  brand?: string;
  links?: string[];
};

export function FooterMinimal({ brand = "Kiln", links = ["Docs", "Changelog", "Status", "GitHub", "Privacy"] }: FooterMinimalProps) {
  return (
    <footer className="border-t bg-background">
      <div className="mx-auto flex max-w-6xl flex-col items-center justify-between gap-4 px-6 py-8 text-sm text-muted-foreground sm:flex-row">
        <p className="flex items-center gap-2">
          <span className="size-4 rounded bg-ember" aria-hidden />
          <span className="font-semibold text-foreground">{brand}</span> © {new Date().getFullYear()}
        </p>
        <nav aria-label="Footer">
          <ul className="flex flex-wrap justify-center gap-x-5 gap-y-1">
            {links.map((l) => (
              <li key={l}>
                <a href="#" className="transition-colors hover:text-foreground">
                  {l}
                </a>
              </li>
            ))}
          </ul>
        </nav>
      </div>
    </footer>
  );
}
```