The footer component is an important section of a website where you should provide content such as sitemap links, copyright text, logo of your brand, social media account links, and more.
Get started with the examples from Pol-ui based on multiple styles, sizes, and colors by using React components and the utility classes from Tailwind CSS.
To start using the footer component you need to import it from pol-ui:
import { Footer } from "pol-ui";Default Footer
Footer
import { Copyright, Footer, FooterLinkGroup, Link } from "pol-ui";
import React from "react";
const FooterComponent = () => {
return (
<Footer>
<div className="flex w-full justify-between p-6">
<Copyright href="#" by="Pol-ui" year={thisYear} />
<FooterLinkGroup>
<Link href="#">About</Link>
<Link href="#">Privacy Policy</Link>
<Link href="#">Licensing</Link>
<Link href="#">Contact</Link>
<Button size="sm">Get Started</Button>
</FooterLinkGroup>
</div>
</Footer>
);
};
export default FooterComponent;Props
Footer
| Prop name | Type | Default | Description |
|---|---|---|---|
| container | boolean | false | If true, the footer will be wrapped in a container |
| theme | object | Custom theme for the footer | |
| className | string | "" | Custom class for the footer |
| children | node | null | The content of the footer |
💡
You can also provide any prop comming from the HTML footer tag.
FooterBrand
| Prop name | Type | Default | Description |
|---|---|---|---|
| alt | string | "" | The alt text for the image |
| className | string | "" | Custom class for the brand |
| href | string | "" | The link for the brand |
| name | string | "" | The name of the brand |
| src | string | "" | The source of the image |
| theme | object | Custom theme for the brand |
💡
You can also provide any prop comming from the HTML anchor tag and the HTML image tag. If your brand has a href prop, the brand will be rendered as an anchor.
FooterLinkGroup
| Prop name | Type | Default | Description |
|---|---|---|---|
| col | boolean | false | If true, the group will be rendered as a column |
| theme | object | Custom theme for the group | |
| titleAs | string | "h2" | The tag for the title |
| title | string | "" | The title of the group |
| titleClassname | string | "" | Custom class for the title |
| className | string | "" | Custom class for the group |
| children | node | null | The content of the group |
💡
You can also provide any prop comming from the HTML ul tag.
Examples
Footer with a brand
Footer
import { Copyright, Footer, FooterLinkGroup, Link } from "pol-ui";
import React from "react";
const FooterComponent = () => {
return (
<Footer>
<div className="w-full p-6 text-center">
<div className="w-full justify-between sm:flex sm:items-center sm:justify-between">
<FooterBrand
href="https://ui.polgubau.com"
src="https://ui.polgubau.com/logo.png"
alt="Pol-ui Logo"
/>
<FooterLinkGroup>
<Link href="#">About</Link>
<Link href="#">Privacy Policy</Link>
<Link href="#">Licensing</Link>
<Link href="#">Contact</Link>
</FooterLinkGroup>
</div>
<Divider />
<Copyright href="#" by="Pol-uiâ„¢" year={2022} />
</div>
</Footer>
);
};
export default FooterComponent;Footer with social media links
Footer
import { Copyright, Footer, FooterLinkGroup, Link } from "pol-ui";
import React from "react";
const FooterComponent = () => {
return (
<Footer>
<div className="w-full p-6">
<div className="grid w-full justify-between sm:flex sm:justify-between md:flex md:grid-cols-1">
<div>
<FooterBrand
href="https://ui.polgubau.com"
src="https://ui.polgubau.com/logo.png"
alt="Pol-ui Logo"
/>
</div>
<div className="grid grid-cols-2 gap-8 sm:mt-4 sm:grid-cols-3 sm:gap-6">
<div>
<FooterLinkGroup col title="about">
<Link href="#">Pol-ui</Link>
<Link href="#">Tailwind CSS</Link>
</FooterLinkGroup>
</div>
<div>
<FooterLinkGroup col title="Follow us">
<Link href="#">Github</Link>
<Link href="#">Discord</Link>
</FooterLinkGroup>
</div>
<div>
<FooterLinkGroup col title="Legal">
<Link href="#">Privacy Policy</Link>
<Link href="#">Terms & Conditions</Link>
</FooterLinkGroup>
</div>
</div>
</div>
<Divider />
<div className="w-full sm:flex sm:items-center sm:justify-between">
<Copyright href="#" by="Pol-uiâ„¢" year={2022} />
<div className="mt-4 flex space-x-2 sm:mt-0 sm:justify-center">
<IconButton href="#">
<BsDribbble size={20} />
</IconButton>
<IconButton href="#">
<BsInstagram size={20} />
</IconButton>
<IconButton href="#">
<BsGithub size={20} />
</IconButton>
<IconButton href="#">
<BsDribbble size={20} />
</IconButton>
</div>
</div>
</div>
</Footer>
);
};
export default FooterComponent;Footer with a sitemap
Footer
import { Copyright, Footer, FooterLinkGroup, Link } from "pol-ui";
import React from "react";
const FooterComponent = () => {
return (
<Footer>
<div className="w-full bg-gray-800 dark">
<div className="grid w-full grid-cols-2 gap-8 px-6 py-8 md:grid-cols-4">
<div>
<FooterLinkGroup col title="Company">
<Link href="#">About</Link>
<Link href="#">Careers</Link>
<Link href="#">Brand Center</Link>
<Link href="#">Blog</Link>
</FooterLinkGroup>
</div>
<div>
<FooterLinkGroup col title="help center">
<Link href="#">Discord Server</Link>
<Link href="#">Twitter</Link>
<Link href="#">Facebook</Link>
<Link href="#">Contact Us</Link>
</FooterLinkGroup>
</div>
<div>
<FooterLinkGroup col title="legal">
<Link href="#">Privacy Policy</Link>
<Link href="#">Licensing</Link>
<Link href="#">Terms & Conditions</Link>
</FooterLinkGroup>
</div>
<div>
<FooterLinkGroup col title="download">
<Link href="#">iOS</Link>
<Link href="#">Android</Link>
<Link href="#">Windows</Link>
<Link href="#">MacOS</Link>
</FooterLinkGroup>
</div>
</div>
<div className="w-full bg-gray-700 px-4 py-6 sm:flex sm:items-center sm:justify-between sm:px-10">
<Copyright href="#" by="Pol-uiâ„¢" year={2022} />
<div className="mt-4 flex space-x-2 sm:mt-0 sm:justify-center">
<IconButton href="#">
<BsDribbble size={20} />
</IconButton>
<IconButton href="#">
<BsInstagram size={20} />
</IconButton>
<IconButton href="#">
<BsGithub size={20} />
</IconButton>
<IconButton href="#">
<BsDribbble size={20} />
</IconButton>
</div>
</div>
</div>
</Footer>
);
};
export default FooterComponent;Theme
interface FooterTheme {
brand: FooterBrandTheme;
groupLink: FooterLinkGroupTheme;
root: {
base: string;
container: string;
};
}
interface FooterLinkGroupTheme {
title: string;
base: string;
col: string;
titleAs?: ElementType;
}
interface FooterBrandTheme {
base: string;
img: string;
span: string;
}