A full website footer with a brand blurb, social buttons, link columns, a newsletter mini-form, legal links and a live status pill.
npx shadcn@latest add https://hyperblur.dev/r/footer-columns.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/footer-columns.tsx.
import { FooterColumns } from "@/components/hyperblur/footer-columns"
<FooterColumns onSubscribe={(email) => console.log(email)} />| Prop | Type | Default | Description |
|---|---|---|---|
| logo | ReactNode | Content of the logo slot. Defaults to a small mark with the Hyperblur name. | |
| blurb | string | "Build, ship and measure product experiments from one workspace your whole team can trust." | Short description under the logo. |
| socials | { name: "x" | "github" | "linkedin" | "youtube" | "instagram"; label?: string; href?: string }[] | x, github, linkedin, youtube | Social icon buttons. |
| columns | { title: string; links: { label: string; href?: string }[] }[] | Product, Company, Resources, Legal | Link columns. Three or four work best. They collapse to two columns, then one, as the container narrows. |
| newsletter | boolean | true | Shows the email mini-form under the blurb. |
| newsletterTitle | string | "Product updates, once a month" | Label above the mini-form. |
| onSubscribe | (email: string) => void | Called with the trimmed email after it passes validation. | |
| legal | { label: string; href?: string }[] | Privacy, Terms, Cookies | Links in the bottom bar. |
| copyright | string | "© 2026 Hyperblur, Inc. All rights reserved." | Copyright line in the bottom bar. |
| status | { label: string; tone?: "ok" | "warn" | "down"; href?: string } | null | { label: "All systems normal", tone: "ok" } | Status pill with a pulsing dot. Pass an href to make it a link, or null to hide it. |
| accent | string | "#2f7bff" | Color of hover states, the subscribe button and focus rings. |