Columns footer

Four columns of links, a newsletter sign-up that checks and confirms, and a language select and theme switch.

$ pnpm dlx shadcn@latest add @dashral/columns-footer

When to use

A full footer: the brand and social accounts, columns of links, a newsletter, the language and the theme.
Marketing sites with many pages to link from every page.

When not to use

Apps and docs: Simple footer.
Large sites with many products and news: Mega footer.

Usage

Columns footer with your own data: every prop has the sample as its default, so pass only what you have.

example.tsx

1import { ColumnsFooter } from "@/components/dashral/blocks/columns-footer"
2
3<ColumnsFooter
4  brand={{ name: "Acme", href: "/" }}
5  columns={footerColumns}
6  onSubscribe={(email) => api.newsletter.subscribe(email)}
7  language={locale}
8  onLanguageChange={(language) => router.push(`/${language}`)}
9  onThemeChange={setTheme}
10/>

API reference

ColumnsFooter

A full website footer: the brand with its line and social accounts, four columns of links, a newsletter sign-up that checks the address and confirms, and a bottom bar with the copyright, a language select and a light/dark switch. The switch toggles the dark class on <html>; pass onThemeChange to use your own (next-themes, say). Every part comes from props; point onSubscribe at your newsletter (a thrown Error shows its message under the field).

Prop	Type	Default
`brand`	`{ name: string; href: string; logo?: React.ReactNode }`	`sample`
`tagline`	`string`	`sample`
`newsletter`	`{ label: string; done: string } \| null` The sign-up's label and what it says once you're in; null hides it.	`sample`
`onSubscribe`	`(email: string) => Promise<void> \| void`	—
`social`	`SocialLink[]`	`sample`
`columns`	`FooterColumn[]`	`sample`
`copyright`	`string` The copyright line (© this year and the brand without it).	—
`languages`	`FooterLanguage[]` None hides the select.	`sample`
`language`	`string` The language picked, by value (the footer keeps it without it).	—
`onLanguageChange`	`(language: string) => void`	—
`onThemeChange`	`(theme: "light" \| "dark") => void`	—

type FooterLink

Prop	Type	Default
`label`	`string`	—
`href`	`string`	—

type FooterColumn

Prop	Type	Default
`title`	`string`	—
`links`	`FooterLink[]`	—

type SocialLink

A social account: its name and its icon's SVG path (a 24×24 view box).

Prop	Type	Default
`label`	`string`	—
`path`	`string`	—
`href`	`string`	—

type FooterLanguage

Prop	Type	Default
`value`	`string`	—
`label`	`string`	—