Dark Themed Card Footer

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its 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/footer31.tsx instead.

Usage

The file also exports footer31Demo, 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 { Footer31, footer31Demo } from "@/components/blocks/footer/footer31";

export default function Page() {
  return <Footer31 {...footer31Demo} />;
}

Props

Types

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

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

type SocialLink = { label: string; href: string; icon: "twitter" | "instagram" | "linkedin" | "github" };

Behavior notes

• The inverted card uses semantic bg-foreground / text-background tokens rather than a literal dark color, so it still inverts correctly if the site's theme tokens change.
• socialLinks maps a fixed set of platform keys to lucide-react icons internally; the platform's real brand mark is not rendered since this lucide-react version ships no brand icons, only a neutral generic glyph per platform.
• The social icon row and its container are omitted entirely when socialLinks is empty, leaving just the copyright line in the bottom bar.
• Every link is a plain anchor; there is no client-side interactivity anywhere in this block.