ComponentsLanding
Footer
Marketing site footer with brand, link groups, social links, legal links, and copyright
The Footer component provides a complete site footer for marketing and landing pages. It supports a brand block with description, columns of grouped links, social links, a bottom bar with copyright and legal links, and a muted surface variant.
Import
import { Footer } from '@nim-ui/components';Usage
Code
<Footer
brand="Nim UI"
description="A modern React component library for building production-ready applications."
linkGroups={[
{
title: 'Product',
links: [
{ label: 'Features', href: '/features' },
{ label: 'Pricing', href: '/pricing' },
{ label: 'Changelog', href: '/changelog' },
],
},
{
title: 'Resources',
links: [
{ label: 'Documentation', href: '/docs' },
{ label: 'Components', href: '/components' },
],
},
{
title: 'Company',
links: [
{ label: 'About', href: '/about' },
{ label: 'Blog', href: '/blog' },
],
},
]}
copyright="© 2026 Nim UI. All rights reserved."
/>Simple Footer
A minimal footer with just copyright and legal links renders as a single bottom bar.
Code
<Footer
copyright="© 2026 Nim UI. All rights reserved."
legalLinks={[
{ label: 'Privacy', href: '/privacy' },
{ label: 'Terms', href: '/terms' },
]}
/>Muted Variant
Code
<Footer
variant="muted"
brand="Nim UI"
description="Premium operations minimal."
linkGroups={[
{
title: 'Product',
links: [
{ label: 'Features', href: '/features' },
{ label: 'Pricing', href: '/pricing' },
],
},
]}
copyright="© 2026 Nim UI"
/>Props
| Name | Type | Default | Description |
|---|---|---|---|
brand | React.ReactNode | - | Brand content displayed in the footer — text or a logo node |
description | string | - | Short supporting text displayed below the brand |
linkGroups | { title: string; links: { label: string; href: string }[] }[] | - | Columns of grouped navigation links |
socialLinks | { label: string; href: string; icon?: React.ReactNode }[] | - | Social media links; the label becomes the accessible name when an icon is provided |
legalLinks | { label: string; href: string }[] | - | Links displayed in the bottom bar — e.g. privacy policy and terms |
copyright | string | - | Copyright notice displayed in the bottom bar |
variant | 'default' | 'muted' | 'default' | Surface style — default (white) or muted (subtle neutral background) |
className | string | - | Additional CSS classes to apply to the root element |
Usage Examples
Complete Marketing Footer
function SiteFooter() {
return (
<Footer
brand="Nim UI"
description="A modern React component library."
linkGroups={[
{
title: 'Product',
links: [
{ label: 'Features', href: '/features' },
{ label: 'Pricing', href: '/pricing' },
],
},
{
title: 'Company',
links: [
{ label: 'About', href: '/about' },
{ label: 'Careers', href: '/careers' },
],
},
]}
socialLinks={[
{ label: 'GitHub', href: 'https://github.com/nim-ui', icon: <GitHubIcon /> },
{ label: 'Twitter', href: 'https://twitter.com/nim_ui', icon: <TwitterIcon /> },
]}
legalLinks={[
{ label: 'Privacy', href: '/privacy' },
{ label: 'Terms', href: '/terms' },
]}
copyright={`© ${new Date().getFullYear()} Nim UI. All rights reserved.`}
/>
);
}Accessibility
The Footer component follows accessibility best practices:
- Uses a semantic
<footer>element, exposed as thecontentinfolandmark - Link group titles use heading elements for screen-reader navigation
- Social links carry an
aria-labelso icon-only links remain accessible - All interactive elements have visible focus rings and support keyboard navigation