Footer

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";

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

Prop nameTypeDefaultDescription
containerbooleanfalseIf true, the footer will be wrapped in a container
themeobjectCustom theme for the footer
classNamestring""Custom class for the footer
childrennodenullThe content of the footer
💡

You can also provide any prop comming from the HTML footer tag.

FooterBrand

Prop nameTypeDefaultDescription
altstring""The alt text for the image
classNamestring""Custom class for the brand
hrefstring""The link for the brand
namestring""The name of the brand
srcstring""The source of the image
themeobjectCustom 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 nameTypeDefaultDescription
colbooleanfalseIf true, the group will be rendered as a column
themeobjectCustom theme for the group
titleAsstring"h2"The tag for the title
titlestring""The title of the group
titleClassnamestring""Custom class for the title
classNamestring""Custom class for the group
childrennodenullThe content of the group
💡

You can also provide any prop comming from the HTML ul tag.

Examples

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

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 &amp; 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

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 &amp; 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;
}

Since February 17, 2024

Proudly Open Source
  • Npm

  • Github

  • Creator

  • Made with love and Pol-ui by Pol Gubau Amores