Inset card

Footer with a centered CTA above an inset link card.

Usage

import { InsetFooter } from '@/components/blocks/footer-02'


<InsetFooter />


// Hide the call to action and swap in your own content
<InsetFooter
  cta={null}
  brand="Nestegg"
  tagline="Tools for teams who care about the details."
  columns={[
    {
      label: 'Product',
      links: [
        { label: 'Pricing', href: '/pricing' },
        { label: 'Changelog', href: '/changelog', badge: 'New' },
      ],
      viewAll: { label: 'View all', href: '/product' },
    },
  ]}
  credit={null}
/>

Install

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

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

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

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

Source

Props

Inset card props
Prop	Type	Default	Description
brand	string	= 'Plumwise'	Brand name next to the logo, also used in the copyright and social labels.
brandHref	string	= '#'	Where the brand links to.
logo	ReactNode	= Plum mark	Mark shown before the brand name.
tagline	string	= 'Calm, shared money for everyday people.'	Short line under the brand.
columns	InsetFooterColumn[]	= Features / Made for / Learn / Company	Link columns, each with a label, links with an optional badge, and an optional viewAll link.
socials	InsetFooterSocial[]	= LinkedIn / TikTok / Instagram	Social links with a name, href, and icon. Pass an empty array to hide them.
copyright	string	= '© {year} {brand}'	Text at the start of the bottom row.
credit	InsetFooterCredit \| null	= { label: 'Site by Pellow & Finch', href: '#' }	Credit on the right of the bottom row. Pass null to hide it.
cta	InsetFooterCta \| null	= Plumwise call to action	Headline, optional description, and button above the card. Pass null to hide it.
className	string	= —	Additional classes for the footer.
style	CSSProperties	= —	Inline styles, handy for overriding the `--pp-*` theme variables.