Contact Footer

A contact-forward footer: a parenthetical label and closing heading sit above oversized email, phone, and address links beside compact link columns, with a pill CTA and a back-to-top bottom bar link.

By Staaarter Team

Footer

Docs

Live preview

Docs

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.

npx shadcn add https://staaarter.com/r/contact-footer.json

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

Usage

The file also exports footer13Demo, 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 { Footer13, footer13Demo } from "@/components/blocks/footer/footer13";

export default function Page() {
  return <Footer13 {...footer13Demo} />;
}

Props

Prop	Type	Default	Description
label	string	none	Parenthetical label above the heading, rendered as (label).
heading	string	none	Closing heading above the contact links.
email	string	none	Email address, rendered as an oversized mailto: link.
phone	string	none	Phone number, rendered as an oversized tel: link.
address	string	none	Plain-text mailing address below the phone link.
columns	FooterColumn[]	none	Compact titled link columns beside the contact links.
ctaLabel	string	none	Label for the pill CTA button.
ctaHref	string	"/contact"	Link target for the pill CTA button.
copyright	string	none	Copyright line in the bottom bar.
backToTopLabel	string	"Back to top"	Label for the back-to-top link in the bottom bar.
className	string	none	Extra classes for the outer footer element.

Types

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

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

Behavior notes

The back-to-top link is a plain anchor (href="#top"), not a client-side scroll handler, so this block stays a server component.
The pill CTA links via the button's render prop to ctaHref; nothing is submitted, it is a normal navigation link styled as a button.

More Footer Blocks

View all →

Minimal Centered Footer

Compact centered footer with a lowercase wordmark, tagline, uppercase link row, and a social row over a hairline rule.

CTA Footer

Footer opening with a light closing heading and accent buttons, then a slim wordmark and link bottom bar.

Editorial Newsletter Footer

Light footer with a wordmark, tagline, newsletter signup, three link columns, and a legal bottom bar.

Brand Column Footer

Four-column footer with a wide brand column, oversized wordmark, and three ruled link columns.

Live Studio Clock Footer

Footer built around a real ticking clock with a pulsing open/closed status, city, and day.

Split CTA Footer

Two-column footer with a pill CTA and email on the left, a stacked oversized nav on the right.