Marketing block

Minimal Footer Bar

One row — brand, a handful of links, socials, copyright — for a site where a five-column footer would be whitespace pretending to be structure.

106 lineslucide-reactAdded 8 Aug 2026

footer
minimal
bar
simple
links

What's included

components/footer-minimal.tsx
Needs lucide-react

Works with

React
Next.js
Tailwind CSS
TypeScript

npx hoverlab add footer-minimal

Or over MCP, from your editor's agent — no account needed.

License

Free to read, copy and install, for personal and non-commercial projects. Shipping it in client work or a paid product needs Pro ($79 once). The source lands in your repo and stops being ours — no attribution, nothing to upgrade.

Was this useful?

Start a page with this section — add more, order them, and leave with the page source.

Preview

Rendered live in your current theme — this is the same component whose source is below, not a screenshot of it.

Source

components/footer-minimal.tsx

/**
 * <FooterMinimal> — one row: brand, a few links, socials, copyright.
 *
 * For a site with a handful of pages, where a five-column footer would be
 * mostly whitespace pretending to be structure. A small site with a big
 * footer looks padded; this looks finished.
 *
 * The whole thing is a single flex row that becomes a stack below `sm`,
 * with the copyright ordered *last* visually on mobile and first in the
 * DOM — `flex-col-reverse` handles the flip without duplicating markup or
 * reordering what a screen reader hears.
 *
 * Server component. Nothing here has state.
 */

import * as React from 'react'
import { Github, Twitter } from 'lucide-react'

export interface FooterMinimalLink {
  label: string
  href: string
}

export interface FooterMinimalProps {
  brand?: string
  links?: FooterMinimalLink[]
  socials?: Array<{ label: string; href: string; icon: 'github' | 'twitter' }>
  year?: number
  className?: string
}

const DEFAULT_LINKS: FooterMinimalLink[] = [
  { label: 'Docs', href: '#' },
  { label: 'Pricing', href: '#' },
  { label: 'Blog', href: '#' },
  { label: 'Privacy', href: '#' },
  { label: 'Terms', href: '#' },
]

const DEFAULT_SOCIALS: FooterMinimalProps['socials'] = [
  { label: 'GitHub', href: '#', icon: 'github' },
  { label: 'Twitter', href: '#', icon: 'twitter' },
]

const ICONS = { github: Github, twitter: Twitter } as const

export function FooterMinimal({
  brand = 'Acme',
  links = DEFAULT_LINKS,
  socials = DEFAULT_SOCIALS,
  year = new Date().getFullYear(),
  className = '',
}: FooterMinimalProps) {
  return (
    <footer className={`border-t border-border/60 ${className}`}>
      <div className="mx-auto flex w-full max-w-7xl flex-col-reverse items-center gap-6 px-4 py-8 sm:flex-row sm:justify-between sm:px-6 lg:px-8">
        {/* Brand + copyright */}
        <div className="flex items-center gap-2.5">
          <span
            aria-hidden
            className="flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-primary to-emerald-600 text-xs font-black text-primary-foreground"
          >
            {brand.slice(0, 1)}
          </span>
          <p className="text-sm text-muted-foreground">
            © {year} {brand}
          </p>
        </div>

        {/* Links */}
        <nav aria-label="Footer" className="min-w-0">
          <ul className="flex flex-wrap items-center justify-center gap-x-6 gap-y-2">
            {links.map((link) => (
              <li key={link.label} className="min-w-0 max-w-full">
                <a
                  href={link.href}
                  className="break-words text-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                >
                  {link.label}
                </a>
              </li>
            ))}
          </ul>
        </nav>

        {/* Socials */}
        <div className="flex gap-1">
          {socials?.map(({ label, href, icon }) => {
            const Icon = ICONS[icon]
            return (
              <a
                key={label}
                href={href}
                aria-label={label}
                className="flex h-8 w-8 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
              >
                <Icon aria-hidden className="h-4 w-4" />
              </a>
            )
          })}
        </div>
      </div>
    </footer>
  )
}

Before you paste

Styling is Tailwind utility classes on semantic tokens (bg-card, text-muted-foreground) — it inherits your theme instead of overriding it.
Install: npm i lucide-react
Every prop has a default, so it renders standalone before you wire it up.

Where it goes

Drop it at components/footer-minimal.tsx and import it where you need the section:

import { FooterMinimal } from '@/components/footer-minimal'

Customize

1 of this block’s props are simple enough to drive from here. Change them and the block below re-renders — it is the same component whose source is above, not a mock of it. Everything else it accepts is in the table underneath.

Props

Read out of the component’s own type and signature, so this cannot drift from the source below. Every prop has a default — the component renders standalone before you pass it anything.

Prop	Type	Default
`brand`	`string`	`'Acme'`
`links`	`FooterMinimalLink[]`	`DEFAULT_LINKS`
`socials`	`Array<{ label: string; href: string; icon: 'github' \| 'twitter' }>`	`DEFAULT_SOCIALS`
`year`	`number`	`new Date().getFullYear()`
`className`	`string`	`''`

Not using React?

The same block rendered once to markup, wrapped as a file your framework compiles. Tailwind classes are framework-agnostic, so the design transfers intact — the behaviour does not.

footer-minimal.html

<!--
  Minimal Footer Bar — markup from the Hoverlab catalog.

  This is the block rendered once to HTML and wrapped as a component
  file. It is not a port of the React source: the Tailwind classes carry
  the design, which is the part that took the work, and they are the same
  in every framework.

  This block has no interactive behaviour, so nothing is missing.
-->
<footer class="border-t border-border/60 ">
  <div class="mx-auto flex w-full max-w-7xl flex-col-reverse items-center gap-6 px-4 py-8 sm:flex-row sm:justify-between sm:px-6 lg:px-8">
    <div class="flex items-center gap-2.5">
      <span aria-hidden="true" class="flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-primary to-emerald-600 text-xs font-black text-primary-foreground">A</span>
      <p class="text-sm text-muted-foreground">© 2026 Acme</p>
    </div>
    <nav aria-label="Footer" class="min-w-0">
      <ul class="flex flex-wrap items-center justify-center gap-x-6 gap-y-2">
        <li class="min-w-0 max-w-full">
          <a href="#" class="break-words text-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">Docs</a>
        </li>
        <li class="min-w-0 max-w-full">
          <a href="#" class="break-words text-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">Pricing</a>
        </li>
        <li class="min-w-0 max-w-full">
          <a href="#" class="break-words text-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">Blog</a>
        </li>
        <li class="min-w-0 max-w-full">
          <a href="#" class="break-words text-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">Privacy</a>
        </li>
        <li class="min-w-0 max-w-full">
          <a href="#" class="break-words text-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">Terms</a>
        </li>
      </ul>
    </nav>
    <div class="flex gap-1">
      <a href="#" aria-label="GitHub" class="flex h-8 w-8 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-github h-4 w-4" aria-hidden="true">
          <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path>
          <path d="M9 18c-4.51 2-5-2-7-2"></path>
        </svg>
      </a>
      <a href="#" aria-label="Twitter" class="flex h-8 w-8 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-twitter h-4 w-4" aria-hidden="true">
          <path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path>
        </svg>
      </a>
    </div>
  </div>
</footer>

This is rendered HTML, not a translation of the React source. The Tailwind classes carry the design and work in any framework.
It is one frame: the component in its initial state, with no props applied beyond the defaults.
Requires Tailwind, and the design tokens the classes reference (bg-card, text-muted-foreground, and so on). The template ZIPs ship a globals.css that defines them.

What each framework gets across the whole catalog — effects convert properly; this rung is markup.

For AI

The component, its props, the design tokens it expects and the command that installs it — as one prompt. Paste it into Claude, Cursor, v0 or ChatGPT and what they build around it will match the rest of the catalog instead of inventing its own system.

See the prompt

Used in these pages

Want the whole screen instead of this one section? Open a page and copy it entire.

4 more blocks in Footers

All of them free to read, copy and install — no account, no locked tiles, no watermarked preview. The whole catalog is open, and so are the API and the CLI.

Browse Footers

Shipping one commercially

Copying the code is free. Putting it in client work or a paid product is what Pro is for — the licence, not the access.

A commercial licence for everything in the catalog
Unlimited bundle exports, in Vue, Svelte and Tailwind
One payment — no subscription, nothing to renew

Pro — $79 once

More Footers blocks

View category