Site footer

A website footer with link columns and newsletter, a minimal layout, and a large fading Silicon mark.

$npx shadcn@latest add @silicon-ui/site-footer

Installation

$npx shadcn@latest add @silicon-ui/site-footer

Install the dependencies.
$npm install lucide-react motion
Copy these files into your project. Shared files are skipped if you already have them.
- components/silicon-ui/blocks/site-footer/site-footer.tsx
- components/silicon-ui/blocks/site-footer/site-footer.module.css
- components/silicon-ui/segmented-control/segmented-control.tsx shared
- components/silicon-ui/segmented-control/segmented-control.module.css shared
- components/silicon-ui/button/button.tsx shared
- components/silicon-ui/button/button.module.css shared
Install the foundation once per app for the design and motion tokens: $npx shadcn@latest add @silicon-ui/silicon-foundation

Source codetsx

import { SiteFooter } from "@/components/silicon-ui/blocks/site-footer/site-footer";

Prop	Type	Default
`variant` `columns` pairs a newsletter with link columns, `minimal` is one quiet row, `logo` ends in a large fading Silicon mark.	`SiteFooterVariant` `"columns""minimal""logo"`	`"columns"`
`brand`	`{ name: string; href?: string; mark?: ReactNode }`	`{ name: "Silicon" }`
`tagline` One short line under the brand.	`string`	`"Interface components that move with intent."`
`columns`	`SiteFooterColumn[]`	`siteFooterExampleColumns`
`links` Links for the minimal variant. Defaults to the first link of each column.	`SiteFooterLink[]`	—
`legal` Small links beside the copyright, such as Privacy and Terms.	`SiteFooterLink[]`	`exampleLegal`
`socials`	`SiteFooterLink[]`	`exampleSocials`
`newsletter` Newsletter signup. Pass null to hide it.	`SiteFooterNewsletter \| null`	`{ title: "Get the monthly release notes", description: "One email a month. Unsubscribe anytime." }`
`status` A system status link. Pass null to hide it.	`{ label: string; tone?: "success" \| "warning" \| "danger"; href?: string } \| null`	`{ label: "All systems normal", tone: "success" }`
`year` Year in the copyright line.	`number`	`new Date().getFullYear()`
`onNavigate` Called for every link that is pressed. Links without an href render as buttons and only call this.	`(link: SiteFooterLink) => void`	—
`className`	`string`	—

Also accepts the props of HTMLAttributes.

Prop	Type	Default
`variant`	`SiteFooterVariant` `"columns""minimal""logo"`	`"columns"`