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

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

```astro live props={{ name: 'footer-1' }}
---
import Footer1Block from "@/components/blocks/footer-1.astro"
---

<Footer1Block
  brandName="Fulldev UI"
  brandHref="/"
  description="Beautiful Astro 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"
/>
```

```astro live props={{ name: 'footer-2' }}
---
import Footer2Block from "@/components/blocks/footer-2.astro"
---

<Footer2Block
  brandName="Fulldev UI"
  brandHref="/"
  description="Beautiful Astro 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"
/>
```

```astro live props={{ name: 'footer-3' }}
---
import Footer3Block from "@/components/blocks/footer-3.astro"
---

<Footer3Block
  brandName="Fulldev UI"
  brandHref="/"
  description="Beautiful Astro 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"
/>
```

## Installation

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