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 Flowbite React 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 flowbite-react:

import { Footer } from "flowbite-react";

Use this example to create a simple and responsive footer component with copyright text and links by adding the <FooterCopyright> and <FooterLink> items inside the <Footer> component.

Use the href prop to add a link to the footer link item and the year prop to add the current year.

Use the <FooterBrand> component to add a logo to the footer component.

Feature social media accounts by adding the <FooterIcon> component inside the <Footer> component.

Sitemap links#

Add sitemap links to the footer component by using the <FooterLinkGroup> and <FooterLink> components. You can also use the <FooterTitle> component to add a title to the sitemap links and group links together.

Theme#

To learn more about how to customize the appearance of components, please see the Theme docs.

{
  "root": {
    "base": "w-full rounded-lg bg-white shadow md:flex md:items-center md:justify-between dark:bg-gray-800",
    "container": "w-full p-6",
    "bgDark": "bg-gray-800"
  },
  "groupLink": {
    "base": "flex flex-wrap text-sm text-gray-500 dark:text-white",
    "link": {
      "base": "me-4 last:mr-0 md:mr-6",
      "href": "hover:underline"
    },
    "col": "flex-col space-y-4"
  },
  "icon": {
    "base": "text-gray-500 dark:hover:text-white",
    "size": "h-5 w-5"
  },
  "title": {
    "base": "mb-6 text-sm font-semibold uppercase text-gray-500 dark:text-white"
  },
  "divider": {
    "base": "my-6 w-full border-gray-200 sm:mx-auto lg:my-8 dark:border-gray-700"
  },
  "copyright": {
    "base": "text-sm text-gray-500 sm:text-center dark:text-gray-400",
    "href": "ml-1 hover:underline",
    "span": "ml-1"
  },
  "brand": {
    "base": "mb-4 flex items-center sm:mb-0",
    "img": "mr-3 h-8",
    "span": "self-center whitespace-nowrap text-2xl font-semibold text-gray-800 dark:text-white"
  }
}

References#