A site footer with link columns, a newsletter signup, status and uptime, in three layouts.
Import it and pass your content. The props that matter most are listed next.
import { SiteFooter } from "@/components/ui/notchset/blocks/site-footer";
export function Footer() {
return (
<SiteFooter
brand={{ name: "Relay", href: "/" }}
tagline="Trace, test and ship AI agents."
columns={[
{ title: "PRODUCT", links: [{ label: "Traces", href: "/traces" }, { label: "Pricing", href: "/pricing" }] },
{ title: "COMPANY", links: [{ label: "Careers", href: "/careers", badge: "4 OPEN" }] },
]}
legal={[{ label: "Privacy", href: "/privacy" }, { label: "Terms", href: "/terms" }]}
copyright="© 2026 RELAY LABS"
status={{ label: "ALL SYSTEMS NORMAL", href: "https://status.relay.dev" }}
signup={{
title: "RELEASE NOTES, ONCE A MONTH",
note: "ONE EMAIL A MONTH · UNSUBSCRIBE ANYTIME",
success: "SUBSCRIBED · CHECK YOUR INBOX",
onSubscribe: (email) => fetch("/api/newsletter", { method: "POST", body: JSON.stringify({ email }) }).then((r) => { if (!r.ok) throw new Error(); }),
}}
/>
);
}variant–
"columns" | "minimal" | "wordmark"The layout. Default columns.
brand–
{ name, href, mark? }The wordmark and its home link.
columns / links / legal / social–
{ label, href, external?, badge? }[]Link columns ({ title, links }), the minimal row's links, the legal line and social links.
status–
{ label, href, days?, uptime? }The live status link; days is the uptime strip (oldest first, { label, incident? }).
region–
{ options, value, onValueChange }An optional data-region switch.
signup–
{ title, note, success, onSubscribe }Release notes; resolve to subscribe, reject to show the failure line.
copyright / tagline / wordmark–
string / ReactNode / stringThe copyright line, the brand's line, and the wordmark layout's letters.
SiteFooterdata-slot="site-footer"
The footer, in one of three layouts.
components/ui/notchset/blocks/site-footer.tsx
pnpm dlx shadcn@latest add https://beautiful-ui.dev/r/site-footer.jsonpnpm dlx shadcn@latest add https://beautiful-ui.dev/r/radix-nova/site-footer.jsonFree, no account or key. Use the command for your project's primitives: a radix-*, new-york or default style in components.json is Radix, a base-* style is Base UI. With the @beautiful-ui registry added, @beautiful-ui/<name> picks for you.
The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.
Give your coding assistant the Markdown guide instead of screenshots.
https://beautiful-ui.dev/api/mcp (setup)v1.0.0 · 2026-10-04
First release