Footer Mega

A multi column site footer with a brand block and titled link groups that reflow from one to five columns. A React and Tailwind footer for marketing sites.

src/registry/ui/footer-mega.tsx/r/footer-mega.json

Installation#

bash

npx shadcn@latest add @minidev/footer-mega

MiniDev UI is in the shadcn registry directory, so the short form works with no setup. Older CLI versions can use the full URL: npx shadcn@latest add https://ui.minidev.pro/r/footer-mega.json

Usage#

tsx

import { FooterMega } from "@/components/ui/footer-mega"

export function Example() {
  return (
    <FooterMega
      columns={[
        { title: "Product", links: [{ label: "Gallery", href: "#" }, { label: "Docs", href: "#" }] },
        { title: "Company", links: [{ label: "Blog", href: "#" }, { label: "Careers", href: "#" }] },
        { title: "Legal", links: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] },
      ]}
    />
  )
}

API reference#

FooterMega props
Prop	Type	Default
`columns`	`Col[]`	`SAMPLE_COLUMNS`
`brand`	`string`	`"Lumen"`
`tagline`	`string`	`"Invoicing and payments for teams tha...`
`className`	`string`	`-`

Dependencies#

npm

React only

Built from

Examples#

Marketing sectionsNav, cards, mega footer

Announcement BarSlim site-wide announcement bar for launches, promos or notices. Centered content, a polite status role for screen readers and an optional dismiss button.Blog CardLinked Tailwind blog post card with a 16:9 cover image, tag, relative date, title and a two line clamped excerpt. Hover and focus states cover the card.Case Study CardCase study card with the company name, a short headline and a large result metric, plus an optional up or down delta. Good for proof sections on landing pages.Cookie BannerFloating React cookie consent card fixed to the corner, with a short notice and Accept and Reject buttons. It is a labelled dialog for assistive tech.Cta BannerTailwind call to action banner with a heading, supporting text and a primary button that stacks on mobile and sits in a row on wider screens.Faq ListAn FAQ section built on an accessible accordion. Pass question and answer pairs and each one expands in place, with keyboard support and a readable max width.

All Landing page sections for React and Tailwind

Learn more

All footers3 blocks