# Footer 04

> A simple footer.

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

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

## Install

```bash
npx shadcn@latest add https://designali.com/r/footer-04.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: `@designali/logos`
- Registry items: `button`, `switch`, `select`, `input`

## Files

### `registry/designali/blocks/footer/footer-04/footer.tsx`

```tsx
"use client"

import Link from "next/link"
import { Nike } from "@designali/logos"
import { Send } from "lucide-react"

import { ThemeSwitch } from "@/registry/designali/blocks/footer/footer-04/theme"
import { Button } from "@workspace/ui/components/button"
import { Input } from "@workspace/ui/components/input"
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@workspace/ui/components/select"

const navLinks = [
  { label: "About", href: "#" },
  { label: "Pricing", href: "#" },
  { label: "Blogs", href: "#" },
  { label: "Docs", href: "#" },
  { label: "Contact", href: "#" },
]

export default function Footer() {
  return (
    <footer className="flex min-h-svh w-full items-center justify-center">
      <div className="p-10">
        <div className="-my-6 grid gap-12 rounded-md border bg-background p-10 md:-my-4 md:grid-cols-2 lg:grid-cols-4">
          <div className="relative">
            <Nike />
            <h2 className="mt-6 mb-2 text-2xl font-semibold tracking-tight">
              Stay Connected
            </h2>
            <p className="mb-4 text-muted-foreground">
              Join our newsletter for the latest updates and exclusive offers.
            </p>
            <form className="relative">
              <Input
                type="email"
                placeholder="Enter your email"
                className="pr-12 backdrop-blur-sm"
              />
              <Button
                type="submit"
                size="icon-sm"
                className="absolute top-0.5 right-0.5"
              >
                <Send className="h-4 w-4" />
                <span className="sr-only">Subscribe</span>
              </Button>
            </form>
            <div className="absolute top-0 -right-4 h-24 w-24 rounded-full bg-primary/10 blur-2xl" />
          </div>
          <div>
            <h3 className="mb-4 text-lg font-semibold">Quick Links</h3>
            <nav className="space-y-2">
              {navLinks.map(({ label, href }) => (
                <Link
                  key={label}
                  href={href}
                  className="block text-muted-foreground transition-colors hover:text-foreground"
                >
                  {label}
                </Link>
              ))}
            </nav>
          </div>
          <div className="">
            <div className="">
              <h3 className="mb-4 text-lg font-semibold">Contact Us</h3>
              <div className="grid space-y-2 text-muted-foreground transition-colors hover:text-foreground">
                <a
                  href="https://www.google.com/maps/place/Dalim/@23.6407561,86.1020664,19z/data=!3m1!4b1!4m6!3m5!1s0x39f42309f0f5d0b5:0xb7e835eb8fe26ca3!8m2!3d23.6407549!4d86.1027101!16s%2Fg%2F11xftydckp"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="hover:underline"
                >
                  Bokaro, India
                </a>
                <a href="tel:+11234567890" className="hover:underline">
                  Phone
                </a>
                <a href="mailto:contact@dalim.in" className="hover:underline">
                  Email
                </a>
              </div>
            </div>

            <div className="mt-1 -ml-3">
              <Select>
                <SelectTrigger className="text-md w-40 border-0 shadow-none">
                  <SelectValue placeholder="Legal" />
                </SelectTrigger>
                <SelectContent side="top">
                  <SelectGroup>
                    <SelectItem value="contact">Contact</SelectItem>
                    <SelectItem value="terms">Terms</SelectItem>
                    <SelectItem value="privacy">Privacy</SelectItem>
                  </SelectGroup>
                </SelectContent>
              </Select>
            </div>
          </div>
          <div className="relative">
            <h3 className="mb-4 text-lg font-semibold">Follow Us</h3>
            <div className="mb-6 flex gap-6">
              <Link
                href={"https://www.linkedin.com/aliimam"}
                target="_blank"
                className="text-muted-foreground transition-colors hover:text-foreground"
              >
                LinkedIn
              </Link>
              <Link
                href={"https://x.com/aliimam_in"}
                target="_blank"
                className="text-muted-foreground transition-colors hover:text-foreground"
              >
                 X
              </Link>
              <Link
                href={"https://www.instagram.com/aliimam.in/"}
                target="_blank"
                className="text-muted-foreground transition-colors hover:text-foreground"
              >
                Instagram
              </Link>
            </div>
            <ThemeSwitch />
          </div>
        </div>
        <div className="mt-3 flex flex-col items-center justify-between gap-3 py-4 text-center md:flex-row">
          <p className="text-sm text-muted-foreground">
            © 2026 AI. All rights reserved.
          </p>
          <nav className="flex gap-4 text-sm">
            <Link href="#" className="text-foreground/60 hover:text-foreground">
              Privacy Policy
            </Link>
            <Link href="#" className="text-foreground/60 hover:text-foreground">
              Terms of Service
            </Link>
          </nav>
        </div>
      </div>
    </footer>
  )
}
```

### `registry/designali/blocks/footer/footer-04/theme.tsx`

```tsx
"use client"

import { useEffect, useState } from "react"
import { MoonIcon, SunIcon } from "lucide-react"
import { useTheme } from "next-themes"

import { Switch } from "@workspace/ui/components/switch"

export function ThemeSwitch() {
  const { setTheme, resolvedTheme } = useTheme()
  const [isDark, setIsDark] = useState(false)

  useEffect(() => {
    setIsDark(resolvedTheme === "dark")
  }, [resolvedTheme])

  const handleToggle = (checked: boolean) => {
    setIsDark(checked)
    setTheme(checked ? "dark" : "light")
  }

  return (
    <div className="group inline-flex items-center gap-2">
      <span
        className={`${
          isDark ? "text-white/60" : ""
        } flex-1 cursor-pointer text-right text-sm font-medium`}
        onClick={() => handleToggle(false)}
      >
        <SunIcon size={16} aria-hidden="true" />
      </span>
      <Switch
        id="theme-switch"
        checked={isDark}
        onCheckedChange={handleToggle}
        aria-label="Toggle theme"
      />
      <span
        className={`${
          !isDark ? "text-white/60" : ""
        } flex-1 cursor-pointer text-left text-sm font-medium`}
        onClick={() => handleToggle(true)}
      >
        <MoonIcon size={16} aria-hidden="true" />
      </span>
    </div>
  )
}
```