Site footer: navigation, contact, socials, legal links and the company details e-commerce law requires in many countries (legal name, tax office and number, MERSİS, trade registry — labels are free text so any country's identifiers fit). A footer landmark with labelled inner navs, social links named by network, and “Cookie settings” as a button that reopens the consent preferences. Dark mode is the recommended default, not enforced.
Installation
The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";
Usage
import { Footer } from "@vamos-ui/react/blocks";
<Footer
theme={{ mode: "dark" }}
brand={{ name: "Vamos", href: "/" }}
columns={[{ title: "Studio", links: [{ href: "/work", label: "Work" }] }]}
social={[{ network: "instagram", href: "https://instagram.com/vamos.ist" }]}
legalLinks={[{ href: "/kvkk", label: "KVKK notice" }]}
company={{ legalName: "Vamos Dijital Ajans Ltd. Şti.", registry: [{ label: "Tax no.", value: "923 145 6780" }] }}
/>footerBlock emits an Organization node; its lint warns when company details are missing (needed when the site sells online).
Examples
Wordmark (restaurant)
Details across the top; the brand at container width at the very bottom, clipped by the edge.
Minimal (landing page)
One row: logo, a few links, socials, ©.
E-commerce legal + newsletter
Full company details, distance-sales and refund links, a newsletter form through the app's action, a credit line.
API
Footer
| Prop | Type | Default |
|---|---|---|
variantLayout. | "columns" | "wordmark" | "minimal" | "columns" |
brandLogo or a display-type name. | { name; logo?: ReactNode | Image; href? } | — |
about≤ 200 characters. | ReactNode | — |
columnsUp to 4 columns of up to 8 links, each a labelled nav. | { title; links: { href; label; newTab? }[] }[] | — |
contactAddress (AddressValue or text), E.164 phone, email. | { address?; phone?; email? } | — |
socialUp to 6 brand icons named by network. | { network; href }[] | — |
legalLinksPrivacy, terms, KVKK… in the bottom line. | Link[] | — |
companyLegal name and registry numbers. | { legalName; registry?: { label; value }[] } | — |
cookieSettings“Cookie settings” button. | boolean | true |
newsletterEmail sign-up through the form island. | { action?; title?; hint? } | — |
credit“Site by …”. | Link | — |
year© year. | number | render year |
labels / localeFooter, Legal, Social media, © {year} {name}… | Partial<Site2Labels> / string | — |
theme / anchor / id / className / components / editModeShared block props. | BlockBaseProps | — |