Footer

Closes a page with the brand, its secondary links in titled columns, and an optional large name.

Configurations

Supported configurations for this component.

3 examples

One command adds this component to your project.

Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.

npx shadcn@latest add @aicanvas/••••••••••••

Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").

Every prop this component accepts. Any other prop is forwarded to the underlying element.

Prop	Type	Default	Description
namereq	`string`	-	The name to set. Shown in capitals, measured in its own face so it runs the column's full width.
mark	`React.ReactNode`	-	SVG shapes for a symbol beside the name (paths without their own fill, so they take the figure's ink), drawn on `markViewBox` and scaled to the cap height.
markViewBox	`string`	'0 0 24 24'	The drawing box the `mark` shapes are drawn on.

Prop	Type	Default	Description
brand	`React.ReactNode`	-	The brand lockup at the head of the left column (a mark and the product name).
description	`React.ReactNode`	-	One line under the brand saying what the product is.
columns	`{ title: string, links: { label: string, href?: string, onClick?: Function }[] }[]`	-	The link columns on the right. A link with no href is a placeholder: it renders, takes focus and fires onClick, but never moves the page.
wordmark	`string \| false`	false	The closing wordmark: a name set huge and faint across the column, running off the bottom edge. Off by default; pass the brand name to sign off with it.
wordmarkMark	`React.ReactNode`	-	SVG shapes for a symbol beside the wordmark, drawn on `wordmarkMarkViewBox` and scaled to the cap height. None by default.
wordmarkMarkViewBox	`string`	'0 0 24 24'	The drawing box the `wordmarkMark` shapes are drawn on.
legal	`React.ReactNode`	-	A bottom line under the columns (copyright, a legal link or two), over a hairline.
maxWidth	`string`	-	The content column's max width (a CSS length), to line the footer up with the page. Full width by default.

Charts how much of a population survives each stage of a sequence.

Charts one measurement over time in a panel that frames itself.

Compares several series across one shared set of axes.