Footer

A collection of 7 production-ready, high-capacity, fully responsive Footer components designed for modern web applications, SaaS platforms, e-commerce stores, and enterprise products.

Footer adapts seamlessly across mobile screens, tablets, and desktop viewports, with support for centered layouts, frosted glass docks, cyberpunk neon glow pulses, quantum particle beams, snapshot studio card piles, colorful modern scroll stack cards, and giant glowing scroll-reveal wordmarks.

Snapshot Footer

Usevariant"snapshot": a modern studio footer with sunken interactive cards and an animated say hi sticker that lifts out on hover.

Active Color

Modern Stack Footer

Usevariant"modern-stack": studio footer with multi-colored cards inspired by modern scroll stack and interactive spring hover physics.

Wordmark Glow Footer

Usevariant"wordmark-glow": a brand footer with solutions columns, direct contact info, legal row, and giant scroll-rising wordmark with soft pointer glow.

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @avara-ui registry once, then copy your styles from the Themes page.

Install Footer

npx shadcn@latest add https://avaraui.com/r/footer.json

components/custom/blocks/FooterBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Step 1 installs these for you. Run them yourself only if you are adding Footer to an existing project by hand. The cn helper and lucide-react are not listed — the installation guide covers them once for every component.

social-links is a component, not a package — the shadcn CLI installs it as source files.

npx shadcn@latest add https://avaraui.com/r/social-links.json

motion is an npm package.

npm install motion

Examples

Simple Centered Footer

Usevariant"simple-centered": for clean, spacious centered brand logo and navigation pills.

Glass Dock Footer

Usevariant"glass-dock": floating glassmorphism bar dock card with backdrop blur.

Neon Glow Pulse Cyberpunk Footer

Usevariant"neon-glow-pulse": dark cyberpunk theme with glowing border pulse effect.

Quantum Particle Beam Lines Footer

Usevariant"quantum-particle-beam": high-energy quantum particle beam lines with glowing neon nodes.

Features

Discover the key capabilities of the Footer component:

7 High-Performance Responsive Variants

Includes Snapshot, Modern Stack, Wordmark Glow, Simple Centered, Glass Dock, Neon Glow Pulse, and Quantum Particle Beam.

100% Screen & Device Responsive

Fluid Tailwind CSS grid and flex layouts built to adapt from 320px mobile viewports up to 4K ultra-wide screens.

Props Reference

Prop	Type	Default	Description
`variant`	`FooterVariant`	`"snapshot"`	Selects from the 6 footer variants (`"snapshot"`, `"modern-stack"`, `"simple-centered"`, `"glass-dock"`, `"neon-glow-pulse"`, `"quantum-particle-beam"`).
`color`	`string`	`"primary"`	Accent theme color (e.g. `"indigo"`, `"rose"`, `"emerald"`, `"lavender"`, or hex). Bridges with the active color picker to style interactive stickers, badges, and glows.
`snapshot`	`SnapshotFooterContent`	Marlo Studio demo copy	Content for `variant="snapshot"`: `headingLines`, `description`, `taglineLines`, five `photos` (`{ src, caption }`), note card `address`, `hours`, `stickerText` and `legalLinks`. Every field is optional.
`sections`	`FooterLinkSection[]`	Per-variant columns	Link columns. A link may carry a `badge` (e.g. `3`), shown as a count pill by `snapshot`.
`brandName`	`string`	`"Avara UI"`	Brand name string displayed in the logo header.
`tagline`	`string`	`"Elevate your web..."`	Brand vision tagline text.
`logo`	`React.ReactNode`	`undefined`	Custom logo icon component.
`socialLinks`	`SocialLink[]`	X, GitHub, LinkedIn, YouTube, Instagram	The social row, rendered by Social Links. Each entry is `{ network, href, label? }`; pass only the networks you have.
`className`	`string`	`""`	Custom Tailwind CSS class overrides.