Creative Tim UICreative Tim UI

Shadcn Footer

PreviousNext

A footer component that displays site information, links, and copyright at the bottom of a page, perfect for navigation, branding, and legal information.

const YEAR = new Date().getFullYear()

const LINKS = [
  {
    title: "About Us",
    href: "#",
  },
  {
    title: "License",
    href: "#",
  },
  {
    title: "Contribute",
    href: "#",
  },
  {
    title: "Contact Us",
    href: "#",
  },
]

export function FooterDemo() {
  return (
    <footer className="border-border flex w-full flex-row flex-wrap items-center justify-center gap-x-12 gap-y-3 border-t py-4 text-center md:justify-between">
      <p>&copy; {YEAR} Creative Tim UI</p>
      <ul className="flex flex-wrap items-center gap-x-6 gap-y-2">
        {LINKS.map(({ title, href }, key) => (
          <li key={key}>
            <a href={href} className="hover:text-primary transition-colors">
              {title}
            </a>
          </li>
        ))}
      </ul>
    </footer>
  )
}

Installation

pnpm dlx @creative-tim/ui@latest add footer

Usage

import FooterDemo from "@/components/footer-demo"
<FooterDemo />

Examples

A footer component with a logo displayed alongside navigation links, perfect for brand recognition and visual consistency.

const YEAR = new Date().getFullYear()

const LINKS = [
  {
    title: "About Us",
    href: "#",
  },
  {
    title: "License",
    href: "#",
  },
  {
    title: "Contribute",
    href: "#",
  },
  {
    title: "Contact Us",
    href: "#",
  },
]

export function FooterWithLogo() {
  return (
    <footer className="w-full">
      <div className="flex w-full flex-row flex-wrap items-center justify-center gap-x-12 gap-y-3 text-center md:justify-between">
        <img
          src="https://www.creative-tim.com/ui/apple-touch-icon-square.jpg"
          alt="Creative Tim UI"
          className="w-8"
        />
        <ul className="flex flex-wrap items-center gap-x-6 gap-y-2">
          {LINKS.map(({ title, href }, key) => (
            <li key={key}>
              <a href={href} className="hover:text-primary transition-colors">
                {title}
              </a>
            </li>
          ))}
        </ul>
      </div>
      <hr className="border-border my-4" />
      <p className="text-center">&copy; {YEAR} Creative Tim UI</p>
    </footer>
  )
}

Footer with Sitemap

A footer component with a comprehensive sitemap organized into multiple columns, providing easy access to all site sections and pages.

import { Dribbble, Facebook, Github, Instagram, Twitter } from "lucide-react"

import { Button } from "@/components/ui/button"

const LINKS = [
  {
    title: "Company",
    items: [
      {
        title: "About us",
        href: "#",
      },
      {
        title: "Careers",
        href: "#",
      },
      {
        title: "Press",
        href: "#",
      },
      {
        title: "News",
        href: "#",
      },
    ],
  },
  {
    title: "Help Center",
    items: [
      {
        title: "Discord",
        href: "#",
      },
      {
        title: "Twitter",
        href: "#",
      },
      {
        title: "GitHub",
        href: "#",
      },
      {
        title: "Contact Us",
        href: "#",
      },
    ],
  },
  {
    title: "Resources",
    items: [
      {
        title: "Blog",
        href: "#",
      },
      {
        title: "Newsletter",
        href: "#",
      },
      {
        title: "Free Products",
        href: "#",
      },
      {
        title: "Affiliate Program",
        href: "#",
      },
    ],
  },
  {
    title: "Products",
    items: [
      {
        title: "Templates",
        href: "#",
      },
      {
        title: "UI Kits",
        href: "#",
      },
      {
        title: "Icons",
        href: "#",
      },
      {
        title: "Mockups",
        href: "#",
      },
    ],
  },
]

const YEAR = new Date().getFullYear()

export function FooterWithSitemap() {
  return (
    <footer className="relative w-full">
      <div className="mx-auto w-full max-w-7xl px-8">
        <div className="mx-auto grid w-full grid-cols-1 gap-8 py-12 md:grid-cols-2 lg:grid-cols-4">
          {LINKS.map(({ title, items }) => (
            <ul key={title}>
              <p className="mb-2 font-semibold opacity-50">{title}</p>
              {items.map(({ title, href }) => (
                <li key={title}>
                  <a
                    href={href}
                    className="hover:text-primary block py-1 transition-colors"
                  >
                    {title}
                  </a>
                </li>
              ))}
            </ul>
          ))}
        </div>
        <div className="border-border mt-10 flex w-full flex-col items-center justify-center gap-4 border-t py-4 md:flex-row md:justify-between">
          <p className="text-center text-sm">
            &copy; {YEAR}{" "}
            <a
              href="https://www.creative-tim.com/"
              className="hover:text-primary"
            >
              Creative Tim UI
            </a>
            . All Rights Reserved.
          </p>
          <div className="flex gap-1 sm:justify-center">
            <Button variant="ghost" size="icon" asChild>
              <a href="#">
                <Facebook className="h-4 w-4" />
              </a>
            </Button>
            <Button variant="ghost" size="icon" asChild>
              <a href="#">
                <Instagram className="h-4 w-4" />
              </a>
            </Button>
            <Button variant="ghost" size="icon" asChild>
              <a href="#">
                <Twitter className="h-4 w-4" />
              </a>
            </Button>
            <Button variant="ghost" size="icon" asChild>
              <a href="#">
                <Github className="h-4 w-4" />
              </a>
            </Button>
            <Button variant="ghost" size="icon" asChild>
              <a href="#">
                <Dribbble className="h-4 w-4" />
              </a>
            </Button>
          </div>
        </div>
      </div>
    </footer>
  )
}

Footer with Social Links

A footer component with social media links and a simplified sitemap, perfect for connecting users to your social presence while maintaining navigation.

import { Dribbble, Facebook, Github, Instagram, Twitter } from "lucide-react"

import { Button } from "@/components/ui/button"

const LINKS = [
  {
    title: "Product",
    items: [
      {
        title: "Overview",
        href: "#",
      },
      {
        title: "Features",
        href: "#",
      },
      {
        title: "Solutions",
        href: "#",
      },
      {
        title: "Tutorials",
        href: "#",
      },
    ],
  },
  {
    title: "Company",
    items: [
      {
        title: "About us",
        href: "#",
      },
      {
        title: "Careers",
        href: "#",
      },
      {
        title: "Press",
        href: "#",
      },
      {
        title: "News",
        href: "#",
      },
    ],
  },
  {
    title: "Resource",
    items: [
      {
        title: "Blog",
        href: "#",
      },
      {
        title: "Newsletter",
        href: "#",
      },
      {
        title: "Events",
        href: "#",
      },
      {
        title: "Help center",
        href: "#",
      },
    ],
  },
]

const YEAR = new Date().getFullYear()

export function FooterWithSocialLinks() {
  return (
    <footer className="relative w-full">
      <div className="mx-auto w-full max-w-7xl px-8">
        <div className="grid grid-cols-1 justify-between gap-4 md:grid-cols-2">
          <h6 className="mb-4 text-lg font-semibold">Creative Tim UI</h6>
          <div className="grid grid-cols-3 justify-between gap-x-6 gap-y-4">
            {LINKS.map(({ title, items }) => (
              <ul key={title}>
                <p className="mb-2 font-semibold opacity-50">{title}</p>
                {items.map(({ title, href }) => (
                  <li key={title}>
                    <a
                      href={href}
                      className="hover:text-primary block py-1 transition-colors"
                    >
                      {title}
                    </a>
                  </li>
                ))}
              </ul>
            ))}
          </div>
        </div>
        <div className="border-border mt-10 flex w-full flex-col items-center justify-center gap-4 border-t py-4 md:flex-row md:justify-between">
          <p className="text-center text-sm">
            &copy; {YEAR}{" "}
            <a
              href="https://www.creative-tim.com/"
              className="hover:text-primary"
            >
              Creative Tim UI
            </a>
            . All Rights Reserved.
          </p>
          <div className="flex gap-1 sm:justify-center">
            <Button variant="ghost" size="icon" asChild>
              <a href="#">
                <Facebook className="h-4 w-4" />
              </a>
            </Button>
            <Button variant="ghost" size="icon" asChild>
              <a href="#">
                <Instagram className="h-4 w-4" />
              </a>
            </Button>
            <Button variant="ghost" size="icon" asChild>
              <a href="#">
                <Twitter className="h-4 w-4" />
              </a>
            </Button>
            <Button variant="ghost" size="icon" asChild>
              <a href="#">
                <Github className="h-4 w-4" />
              </a>
            </Button>
            <Button variant="ghost" size="icon" asChild>
              <a href="#">
                <Dribbble className="h-4 w-4" />
              </a>
            </Button>
          </div>
        </div>
      </div>
    </footer>
  )
}

Best Practices

  • Use footers to provide essential site information and navigation
  • Include copyright information with the current year
  • Organize links into logical groups for better user experience
  • Use social media links to connect users to your online presence
  • Ensure footers are responsive and work well on mobile devices
  • Include important links like About, Contact, Privacy Policy, Terms of Service
  • Use consistent styling that matches your site's design system
  • Consider using a logo for brand recognition
  • Keep footer content concise and organized
  • Test footer links to ensure they work correctly

The footer component provides a clean and accessible way to display site information. It's ideal for websites, applications, documentation sites, and any interface where users need access to site-wide navigation and information.