Footers
Footer with a newsletter form
Link columns with an email capture in the brand slot, so the last thing on the page is an invitation to stay in touch.
Live demo
Full width · the frame has its own viewport, so the breakpoints are real
What it uses
Imports
import { Footer, Newsletter } 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, Newsletter } from '@the_viveksingh/vivek-ui'
const COLUMNS = [
{
title: 'Product',
links: [
{ label: 'Components', href: '#' },
{ label: 'Charts', href: '#' },
{ label: 'Templates', href: '#' },
{ label: 'Changelog', href: '#' },
],
},
{
title: 'Docs',
links: [
{ label: 'Installation', href: '#' },
{ label: 'Theming', href: '#' },
{ label: 'Accessibility', href: '#' },
{ label: 'TypeScript', href: '#' },
],
},
{
title: 'Company',
links: [
{ label: 'About', href: '#' },
{ label: 'Blog', href: '#' },
{ label: 'Careers', href: '#' },
{ label: 'Contact', href: '#' },
],
},
]
export default function FooterWithNewsletter() {
return (
<Footer
brand={
<Newsletter
title="Northwind"
description="Release notes, once a month."
layout="stacked"
buttonLabel="Subscribe"
/>
}
columns={COLUMNS}
copyright="© 2026 Northwind."
/>
)
}