---
type: block
title: Footer
description: Footer layouts for utility navigation, brand presence, and last-mile calls to action.
---

> Fulldev UI for React. The `@fulldev` registry in `components.json` points at `https://ui.full.dev/r/react/styles/{style}/{name}.json`; see [installation](/react/docs/installation.md).

## Footer 1

```tsx title="Usage of @fulldev/footer-1 (react/gallery/blocks/footer-1.tsx, not installed)"
import { Footer1 } from "@/components/blocks/footer-1"

export default function Footer1Demo() {
  return (
    <>
      <Footer1
        brandName="Fulldev UI"
        brandHref="/"
        description="Beautiful React components built with Tailwind CSS. Open source and ready to copy into your projects."
        socials={[
          {
            label: "GitHub",
            href: "https://github.com/fulldotdev/ui",
            icon: "github",
          },
          { label: "Discord", href: "https://discord.gg/", icon: "discord" },
          { label: "X", href: "https://x.com/", icon: "x" },
        ]}
        columns={[
          {
            title: "Product",
            links: [
              { label: "Components", href: "/components/" },
              { label: "Blocks", href: "/blocks/" },
              { label: "Pricing", href: "/blocks/pricing/" },
            ],
          },
          {
            title: "Resources",
            links: [
              { label: "Documentation", href: "/docs/" },
              { label: "Guides", href: "/docs/" },
              { label: "Examples", href: "/blocks/" },
            ],
          },
          {
            title: "Company",
            links: [
              { label: "About", href: "/" },
              { label: "Contact", href: "/blocks/contact/" },
              { label: "GitHub", href: "https://github.com/fulldotdev/ui" },
            ],
          },
        ]}
        copyright="© 2026 fulldev/ui"
      />
    </>
  )
}
```

## Footer 2

```tsx title="Usage of @fulldev/footer-2 (react/gallery/blocks/footer-2.tsx, not installed)"
import { Footer2 } from "@/components/blocks/footer-2"

export default function Footer2Demo() {
  return (
    <>
      <Footer2
        brandName="Fulldev UI"
        brandHref="/"
        description="Beautiful React components built with Tailwind CSS. Open source and ready to use."
        links={[
          { label: "Components", href: "/components/" },
          { label: "Blocks", href: "/blocks/" },
          { label: "Docs", href: "/docs/" },
          { label: "GitHub", href: "https://github.com/fulldotdev/ui" },
        ]}
        socials={[
          {
            label: "GitHub",
            href: "https://github.com/fulldotdev/ui",
            icon: "github",
          },
          { label: "Discord", href: "https://discord.gg/", icon: "discord" },
          { label: "X", href: "https://x.com/", icon: "x" },
        ]}
        copyright="© 2026 fulldev/ui"
        navigationLabel="Footer 2 navigation"
      />
    </>
  )
}
```

## Footer 3

```tsx title="Usage of @fulldev/footer-3 (react/gallery/blocks/footer-3.tsx, not installed)"
import { Footer3 } from "@/components/blocks/footer-3"

export default function Footer3Demo() {
  return (
    <>
      <Footer3
        brandName="Fulldev UI"
        brandHref="/"
        description="Beautiful React components built with Tailwind CSS. Open source and ready to copy into your projects."
        socials={[
          {
            label: "GitHub",
            href: "https://github.com/fulldotdev/ui",
            icon: "github",
          },
          { label: "Discord", href: "https://discord.gg/", icon: "discord" },
          { label: "X", href: "https://x.com/", icon: "x" },
        ]}
        columns={[
          {
            title: "Product",
            links: [
              { label: "Components", href: "/components/" },
              { label: "Blocks", href: "/blocks/" },
              { label: "Pricing", href: "/blocks/pricing/" },
            ],
          },
          {
            title: "Resources",
            links: [
              { label: "Documentation", href: "/docs/" },
              { label: "Guides", href: "/docs/" },
              { label: "Examples", href: "/blocks/" },
            ],
          },
          {
            title: "Company",
            links: [
              { label: "About", href: "/" },
              { label: "Contact", href: "/blocks/contact/" },
              { label: "GitHub", href: "https://github.com/fulldotdev/ui" },
            ],
          },
        ]}
        copyright="© 2026 fulldev/ui"
        bottomLinks={[
          { label: "Privacy", href: "/" },
          { label: "Terms", href: "/" },
          { label: "Sitemap", href: "/" },
        ]}
        navigationLabel="Footer 3 navigation"
      />
    </>
  )
}
```

## Install what this page shows

```bash
npx shadcn@latest add @fulldev/footer-1 @fulldev/footer-2 @fulldev/footer-3
```