Footer

A collection of 4 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, and quantum particle beams.

Simple Centered Footer

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

Active Color

Installation

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

Install Footer

npx shadcn@latest add @algorize-ui/footer

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 this for you. Run it 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 @algorize-ui/social-links

Examples

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:

4 High-Performance Responsive Variants

Includes 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`	`"simple-centered"`	Selects from the 4 active responsive footer variants (`"simple-centered"`, `"glass-dock"`, `"neon-glow-pulse"`, `"quantum-particle-beam"`).
`brandName`	`string`	`"Algorize 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.