Newsletter card

Floating card footer with a newsletter field.

Usage

import { NewsletterCardFooter } from '@/components/blocks/footer-06'


<NewsletterCardFooter />


// Swap in your own content
<NewsletterCardFooter
  headline="Notes on new work, sent once a month."
  brandName="Claywork"
  onSubscribe={async (email) => {
    await fetch('/api/subscribe', { method: 'POST', body: JSON.stringify({ email }) })
  }}
  columns={[
    {
      label: 'Studio',
      links: [
        { label: 'Work', href: '/work' },
        { label: 'About', href: '/about' },
      ],
    },
    {
      label: 'Help',
      links: [
        { label: 'Contact', href: '/contact' },
        { label: 'Privacy', href: '/privacy' },
      ],
    },
  ]}
  contactEmail="studio@claywork.co"
  colors={{ blue: '#2B7FFF', sky: '#8EC5FF' }}
/>

Install

pnpm dlx shadcn@latest add @pastaui-pro/footer-06

npx shadcn@latest add @pastaui-pro/footer-06

yarn dlx shadcn@latest add @pastaui-pro/footer-06

bunx --bun shadcn@latest add @pastaui-pro/footer-06

Source

Props

Newsletter card props
Prop	Type	Default	Description
headline	string	= Letters on new stoneware…	Headline above the email field.
emailLabel	string	= 'Email address'	Accessible label for the email field.
emailPlaceholder	string	= 'Email address'	Placeholder inside the email field.
submitLabel	string	= 'Subscribe'	Accessible name of the arrow button.
successMessage	string	= 'You’re subscribed…'	Message announced after a successful signup.
onSubscribe	(email: string) => void \| Promise<void>	= Simulated success	Called with the trimmed email. Throw or reject to show the error message. Without it, success is simulated after a short delay.
columns	NewsletterFooterColumn[]	= Shop / Help	Link columns, each with a label and label and href pairs.
payments	NewsletterFooterPayment[]	= Visa / Mastercard / PayPal / Apple Pay	Payment marks with a name and icon. Pass an empty array to hide them.
socials	NewsletterFooterSocial[]	= LinkedIn / Pinterest / TikTok	Round social buttons with a label, href and icon.
brandName	string	= 'Sundrift'	Used in the mark’s label and the default copyright.
brandHref	string	= '#'	Where the brand mark links.
mark	ReactNode	= Sundrift mark	Your own logo in the card’s bottom-right corner.
copyright	string	= '© {year} {brandName} Goods Co.'	Text on the left of the line below the card.
contactEmail	string \| null	= 'hello@sundrift.co'	Mail link on the right of the bottom line. Pass null to hide it.
colors	Partial<NewsletterFooterColors>	= { light: '#F3F6FB', dark: '#070E1C', blue: '#2B7FFF', sky: '#8EC5FF' }	Hex colors for the gradient canvas in light and dark mode and its two glows.
className	string	= —	Additional classes for the footer.
style	CSSProperties	= —	Override the `--pp-*` theme variables inline.