Footers

Minimal footer

One line: brand on the start edge, a few links and the copyright. For app shells and short pages.

1 components21 linesServer safeSource on GitHub

Live demo

Full width · the frame has its own viewport, so the breakpoints are real

What it uses

Footer

Imports

import { Footer } from '@the_viveksingh/vivek-ui'

The block

This is the file that renders the demo above, read at build time. Copy it into your project, change the words, and it runs — the only thing it needs is @the_viveksingh/vivek-ui and its stylesheet.

import { Footer } from '@the_viveksingh/vivek-ui'

export default function FooterMinimal() {
  return (
    <Footer
      padding="sm"
      brand="Ledger"
      columns={[
        {
          title: 'Links',
          links: [
            { label: 'Privacy', href: '#' },
            { label: 'Terms', href: '#' },
            { label: 'Status', href: '#' },
          ],
        },
      ]}
      copyright="© 2026 Ledger Ltd."
    />
  )
}

← All 62 blocks