Dark Studio Footer

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/footer/footer18.tsx instead.

Usage

The file also exports footer18Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Footer18, footer18Demo } from "@/components/blocks/footer/footer18";

export default function Page() {
  return <Footer18 {...footer18Demo} />;
}

Props

Types

type FooterLink = { label: string; href: string };

type FooterLinkGroup = { title: string; links: FooterLink[] };

Behavior notes

• The newsletter field and submit button are decorative: no client-side state, no onSubmit handler.
• socials renders only when it has at least one entry; addressLines and columns are always required since the layout depends on both sides being present.
• The section uses bg-foreground/text-background (inverted semantic tokens) instead of literal dark colors, so it still respects the site's own light/dark theme rather than hardcoding one.