Components

Footer

A footer that ends the page with weight: link columns whose underlines pour in as light, a hairline that brightens under the pointer, and a giant liquid wordmark rising out of the bottom edge.

Paste it into ChatGPT, Claude, Cursor or v0.

Usage

React

import Link from 'next/link';
import { Footer } from '@vizzele/react';

<Footer
  linkAs={Link}
  brand={<Logo />}
  tagline="Interfaces that feel alive."
  columns={[
    { title: 'Product', links: [{ href: '/pricing', label: 'Pricing' }] },
    { title: 'Company', links: [{ href: 'https://github.com/you', label: 'GitHub' }] },
  ]}
  legal="© 2026 Acme"
  meta="Made with Vizzele"
  wordmark="Acme"
>
  <NewsletterForm />
</Footer>

Props

Prop	Type	Default	Description
`brand`	`ReactNode`	—	Logo / name, top left.
`tagline`	`ReactNode`	—	A line under the brand.
`children`	`ReactNode`	—	Goes under the brand: a form, social links…
`columns`	`FooterColumn[]`	—	{ title, links: { href, label, external? }[] } — absolute URLs open in a new tab.
`legal / meta`	`ReactNode`	—	Bottom row, left and right.
`wordmark`	`string \| false`	—	Giant text across the bottom.
`wordmarkOptions`	`WordmarkOptions`	—	Passed to the Wordmark.
`linkAs`	`ElementType`	`'a'`	Your router link.

Usage

Props

Accessibility