Footer
Footer is a ready-made neobrutalist section (block) from Cruise UI, built from its components. A site footer block: logo and blurb, 2–4 link columns, social links, an optional WhatsApp button and newsletter form, and a © row. Dark (.on-deep) by default, with a light variant. Install it with npx shadcn@latest add @cruiseui/cruise-footer.
Install
Terminal
npx shadcn@latest add @cruiseui/cruise-footerFirst time? Installation shows the one-off components.json setup (the @cruiseui registry) and how to turn the theme on.
Example
Corners
"use client";
import { CruiseFooter } from "@/components/cruise/blocks/footer";
export default function FooterExample() {
return (
<CruiseFooter
brand="Mama Put Kitchen"
blurb="Home-style meals delivered across Lagos, hot and on time."
columns={[
{ title: "Menu", links: [{ label: "Rice dishes", href: "#rice" }, { label: "Soups", href: "#soups" }, { label: "Drinks", href: "#drinks" }] },
{ title: "Company", links: [{ label: "About us", href: "#about" }, { label: "Careers", href: "#careers" }] },
{ title: "Help", links: [{ label: "Delivery areas", href: "#delivery" }, { label: "Contact", href: "#contact" }] },
]}
socials={[
{ network: "instagram", href: "https://instagram.com/" },
{ network: "x", href: "https://x.com/" },
{ network: "tiktok", href: "https://tiktok.com/" },
]}
whatsapp={{ phone: "+2348012345678", message: "Hello, I'd like to order", label: "Order on WhatsApp" }}
newsletter={{ title: "Weekly menu in your inbox", onSubscribe: async () => {} }}
year={2026}
signatureBand
/>
);
}
When to use it
When to use
The bottom of every marketing or shop page.
When not to
Inside an app dashboard (use the Dashboard layout's sidebar for links).
Props
CruiseFooter
| Prop | Type | Default | Description |
|---|---|---|---|
brand? | string | "Your brand" | Name used in the © line and social link labels. |
logo? | ReactNode | — | Logo next to (or instead of) the brand name; defaults to the name in Baloo 2. |
blurb? | ReactNode | "One short line about what you do and who it's for." | — |
columns? | CruiseFooterColumn[] | DEFAULT_COLUMNS | 2–4 columns of links. |
socials? | CruiseFooterSocial[] | [] | — |
whatsapp? | { phone: string; message?: string | undefined; label?: string | undefined; } | — | Adds a WhatsApp button (the WhatsApp component). |
newsletter? | { title?: string | undefined; label?: string | undefined; button?: string | undefined; done?: string | undefined; onSubscribe: (email: string) => void | Promise<void>; } | — | Adds an email sign-up; onSubscribe gets the address. |
copyright? | ReactNode | — | Text after "©" and the year; defaults to the brand name. |
year? | number | — | Defaults to the current year (shown once the page loads). |
variant? | "dark" | "light" | "dark" | "dark" uses .on-deep; "light" sits on --paper. |
signatureBand? | boolean | false | The active city's signature band along the top. |
className? | string | — | — |
Accessibility
- A <footer> landmark; each link column is a <nav> with its column title as the label.
- Social links are 44px icon buttons named "Brand on Instagram" and so on.
- The newsletter field has a real label and shows errors in words.