Shader wave

Footer over a flowing wave shader.

Usage

import { ShaderFooter } from '@/components/blocks/footer-01'


<ShaderFooter />


// Swap in your own content
<ShaderFooter
  brandName="Foxglove"
  about="Tools for teams who care about the details."
  columns={[
    {
      title: 'Product',
      links: [
        { label: 'Pricing', href: '/pricing' },
        { label: 'Changelog', href: '/changelog' },
      ],
    },
    {
      title: 'Company',
      links: [
        { label: 'About', href: '/about' },
        { label: 'Careers', href: '/careers' },
      ],
    },
  ]}
  copyright="© 2026 Foxglove Inc."
  color={[0.36, 0.3, 0.95]}
/>

Install

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

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

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

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

Source

Props

Shader wave props
Prop	Type	Default	Description
brandName	string	= 'Glintmere'	Brand name used in the default copyright.
aboutTitle	string	= 'Who we are'	Small label above the about blurb.
about	string	= Studio blurb	Short paragraph under the about label.
columns	FooterColumn[]	= Studio / Legal / Get in touch	Link columns, each with a title and label and href pairs.
socials	FooterSocial[]	= Facebook / Instagram / X	Square social buttons with a label, href, and icon. Pass an empty array to hide them.
copyright	string	= '© {year} {brandName}. All rights reserved.'	Text on the left of the bottom bar.
color	[number, number, number]	= [0.17, 0.5, 1]	RGB shader color from 0 to 1.
speed	number	= 1.46	How fast the wave gradient flows.
className	string	= —	Additional classes for the footer.