# Footer

> Footer variant for block.

A shadcn/ui block from the [@uiable](https://uiable.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/uiable/block-footer).

- Page, with a live preview: https://shadcn.exchange/r/uiable/block-footer
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/uiable/block-footer-light-7ede75f1edaa90dc.png
- Registry item: https://uiable.com/r/block-footer.json
- Categories: landing
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://uiable.com/r/block-footer.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `@tabler/icons-react`, `cn`
- Registry items: `@uiable/logo`

## Files

### `src/components/uiable/blocks/landing/footer/footer.tsx`

```tsx
import { ComponentProps } from "react"

// next
import Link from "next/link"

// third-party
import { cn } from "cn"

// project-imports
import branding from "@/branding.json"
import Logo from "@/components/uiable/layout/shared/logo"

// assets
import {
  IconBrandDiscord,
  IconBrandGithub,
  IconBrandX,
} from "@tabler/icons-react"

interface FooterProps extends ComponentProps<"footer"> {
  containerClassName?: string
  showGradient?: boolean
}

const navLinks = [
  { href: "/components", label: "Components" },
  { href: "/pricing", label: "Pricing" },
  { href: "/doc/introduction", label: "Documentation" },
  { href: "/legal/privacy", label: "Privacy" },
  { href: "/legal/terms", label: "Terms" },
  { href: "/legal/license", label: "License" },
  { href: "/legal/imprint", label: "Legal Notice" },
]

const socialLinks = [
  { Icon: IconBrandX, href: branding.company.socialLink.x, label: "Twitter" },
  {
    Icon: IconBrandDiscord,
    href: branding.company.socialLink.discord,
    label: "Discord",
  },
  {
    Icon: IconBrandGithub,
    href: branding.company.socialLink.github,
    label: "Github",
  },
]

//  ------------------------------ | LAYOUT - FOOTER | ------------------------------  //

export default function Footer({
  className,
  containerClassName,
  showGradient = true,
  ...props
}: FooterProps) {
  return (
    <footer
      style={
        showGradient
          ? {
              background:
                "linear-gradient(to top, var(--primary) -180%, var(--background) 95%)",
            }
          : undefined
      }
      className={cn("w-full", className)}
      {...props}
    >
      <div
        className={cn(
          "container mx-auto flex flex-col gap-8 border-border/60 px-4 py-10 sm:px-8 md:flex-row md:items-center md:justify-between",
          containerClassName
        )}
      >
        <div className="flex flex-col gap-3">
          <div className="flex items-center gap-2.5">
            <Logo />
          </div>

          <p className="text-base leading-6 font-normal text-foreground">
            v1.0.0 | Built by{" "}
            <Link
              href={branding.company.url}
              target="_blank"
              rel="noopener noreferrer"
              className="text-primary hover:underline"
            >
              {branding.company.name}
            </Link>
          </p>
        </div>

        <div className="flex flex-col items-start gap-5 sm:flex-row sm:items-center md:items-center">
          <nav className="flex flex-wrap items-center gap-x-6 gap-y-2">
            {navLinks.map(({ href, label }) => (
              <Link
                key={href}
                href={href}
                className="font-sans text-base leading-6 font-normal text-foreground transition hover:text-primary"
              >
                {label}
              </Link>
            ))}
          </nav>

          <div
            aria-hidden="true"
            className="hidden h-6 w-px bg-border sm:block"
          />

          <div className="flex items-center gap-2.5">
            {socialLinks.map(({ Icon, href, label }) => (
              <Link
                key={label}
                href={href}
                target="_blank"
                rel="noopener noreferrer"
                aria-label={label}
                className="flex h-10 w-10 items-center justify-center rounded-full bg-card text-foreground transition-colors hover:bg-muted dark:hover:bg-muted"
              >
                <Icon aria-hidden="true" className="size-4.5" />
              </Link>
            ))}
          </div>
        </div>
      </div>
    </footer>
  )
}
```

### `src/branding.json`

```json
{
  "brandName": "UIAble",
  "title": "Components to Complete Interfaces",
  "company": {
    "name": "CodedThemes ",
    "url": "https://codedthemes.com/",
    "socialLink": {
      "linkedin": "https://in.linkedin.com/company/codedthemes",
      "x": "https://x.com/uiable",
      "instagram": "#",
      "github": "https://github.com/codedthemes/uiable",
      "discord": "https://discord.com/invite/txPuEn5atw",
      "support": "https://uiable.com/account/support"
    }
  },
  "logo": {
    "main": "",
    "logoIcon": "",
    "logoFab": "",
    "logoWatermark": ""
  }
}
```