@versini/ui-footer
v5.2.3
Published
[](https://www.npmjs.com/package/@versini/ui-footer) 
Readme
@versini/ui-footer
)
A flexible and accessible React footer component built with TypeScript and TailwindCSS.
The Footer component provides a semantic footer element with support for two-row layouts, multiple theme modes, and customizable styling. Perfect for page footers with copyright information, links, and other footer content.
Table of Contents
Features
- 🎯 Two-Row Layout: Support for primary and secondary content rows
- ♿ Semantic HTML: Uses proper
<footer>element for accessibility - 🎨 Customizable: Multiple themes and styling options
- 🌲 Tree-shakeable: Lightweight and optimized for bundle size
- 🔧 TypeScript: Fully typed with comprehensive prop definitions
- 🎭 Theme Support: Built-in support for light, dark, and system themes
Installation
npm install @versini/ui-footerNote: This component requires TailwindCSS and the
@versini/ui-stylesplugin for proper styling. See the installation documentation for complete setup instructions.
Usage
Basic Footer
import { Footer } from "@versini/ui-footer";
function App() {
return <Footer row1="© 2024 Your Company. All rights reserved." />;
}Two-Row Footer
import { Footer } from "@versini/ui-footer";
function App() {
return (
<Footer
row1={
<div className="flex justify-center space-x-4">
<a href="/privacy">Privacy Policy</a>
<a href="/terms">Terms of Service</a>
<a href="/contact">Contact</a>
</div>
}
row2="© 2024 Your Company. All rights reserved."
/>
);
}Custom Styled Footer
import { Footer } from "@versini/ui-footer";
function App() {
return (
<Footer
className="bg-gray-800 text-white"
mode="dark"
noMargins
row1={
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 p-6">
<div>
<h3 className="font-bold mb-2">Company</h3>
<ul className="space-y-1">
<li>
<a href="/about">About</a>
</li>
<li>
<a href="/careers">Careers</a>
</li>
</ul>
</div>
<div>
<h3 className="font-bold mb-2">Products</h3>
<ul className="space-y-1">
<li>
<a href="/product1">Product 1</a>
</li>
<li>
<a href="/product2">Product 2</a>
</li>
</ul>
</div>
<div>
<h3 className="font-bold mb-2">Support</h3>
<ul className="space-y-1">
<li>
<a href="/help">Help Center</a>
</li>
<li>
<a href="/contact">Contact</a>
</li>
</ul>
</div>
</div>
}
row2="© 2024 Your Company. All rights reserved."
/>
);
}API
Footer Props
| Prop | Type | Default | Description |
| --------- | ----------------------------------------------- | ---------- | -------------------------------------------------- |
| row1 | React.ReactNode | - | The content to render in the first row |
| row2 | React.ReactNode | - | The content to render in the second row |
| mode | "dark" \| "light" \| "system" \| "alt-system" | "system" | The type of Footer (controls theme/color) |
| noMargins | boolean | false | Whether to render the Footer with margins |
| raw | boolean | false | Whether to render the Footer with no styles |
| className | string | - | CSS class(es) to add to the main component wrapper |
Also supports all standard HTML footer element attributes
Examples
Simple Copyright Footer
import { Footer } from "@versini/ui-footer";
function SimpleCopyright() {
const currentYear = new Date().getFullYear();
return <Footer row1={`© ${currentYear} My Company. All rights reserved.`} />;
}Footer with Links
import { Footer } from "@versini/ui-footer";
function FooterWithLinks() {
return (
<Footer
row1={
<nav className="flex justify-center space-x-6">
<a href="/privacy" className="hover:underline">
Privacy Policy
</a>
<a href="/terms" className="hover:underline">
Terms of Service
</a>
<a href="/contact" className="hover:underline">
Contact Us
</a>
<a href="/sitemap" className="hover:underline">
Sitemap
</a>
</nav>
}
row2="© 2024 Your Company. All rights reserved."
/>
);
}Rich Footer with Social Links
import { Footer } from "@versini/ui-footer";
function RichFooter() {
return (
<Footer
mode="dark"
className="bg-gray-900 text-gray-100"
row1={
<div className="max-w-6xl mx-auto px-4 py-8">
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
{/* Company Info */}
<div>
<h3 className="text-lg font-semibold mb-4">Company</h3>
<ul className="space-y-2">
<li>
<a href="/about" className="hover:text-blue-400">
About Us
</a>
</li>
<li>
<a href="/careers" className="hover:text-blue-400">
Careers
</a>
</li>
<li>
<a href="/news" className="hover:text-blue-400">
News
</a>
</li>
</ul>
</div>
{/* Products */}
<div>
<h3 className="text-lg font-semibold mb-4">Products</h3>
<ul className="space-y-2">
<li>
<a href="/product1" className="hover:text-blue-400">
Product 1
</a>
</li>
<li>
<a href="/product2" className="hover:text-blue-400">
Product 2
</a>
</li>
<li>
<a href="/enterprise" className="hover:text-blue-400">
Enterprise
</a>
</li>
</ul>
</div>
{/* Support */}
<div>
<h3 className="text-lg font-semibold mb-4">Support</h3>
<ul className="space-y-2">
<li>
<a href="/help" className="hover:text-blue-400">
Help Center
</a>
</li>
<li>
<a href="/contact" className="hover:text-blue-400">
Contact
</a>
</li>
<li>
<a href="/status" className="hover:text-blue-400">
System Status
</a>
</li>
</ul>
</div>
{/* Social */}
<div>
<h3 className="text-lg font-semibold mb-4">Follow Us</h3>
<div className="flex space-x-4">
<a href="/twitter" className="hover:text-blue-400">
Twitter
</a>
<a href="/linkedin" className="hover:text-blue-400">
LinkedIn
</a>
<a href="/github" className="hover:text-blue-400">
GitHub
</a>
</div>
</div>
</div>
</div>
}
row2={
<div className="border-t border-gray-800 py-4">
<div className="max-w-6xl mx-auto px-4 flex flex-col md:flex-row justify-between items-center">
<span>© 2024 Your Company. All rights reserved.</span>
<div className="flex space-x-4 mt-2 md:mt-0">
<a href="/privacy" className="text-sm hover:text-blue-400">
Privacy
</a>
<a href="/terms" className="text-sm hover:text-blue-400">
Terms
</a>
<a href="/cookies" className="text-sm hover:text-blue-400">
Cookies
</a>
</div>
</div>
</div>
}
/>
);
}Minimal Footer
import { Footer } from "@versini/ui-footer";
function MinimalFooter() {
return (
<Footer
noMargins
className="py-4 text-center text-sm text-gray-600"
row1="Made with ❤️ by Your Team"
/>
);
}Raw Footer (Unstyled)
import { Footer } from "@versini/ui-footer";
function RawFooter() {
return (
<Footer
raw
className="custom-footer-styles"
row1={
<div className="my-custom-layout">Custom styled footer content</div>
}
/>
);
}Theme Variations
import { Footer } from "@versini/ui-footer";
function ThemeVariations() {
return (
<div className="space-y-8">
<Footer
mode="light"
className="bg-white border-t"
row1="Light theme footer"
/>
<Footer
mode="dark"
className="bg-gray-800 text-white"
row1="Dark theme footer"
/>
<Footer
mode="system"
row1="System theme footer (adapts to user preference)"
/>
</div>
);
}