Early price: everything for $99, lifetime

Components

Gradient Footer

Pro

Installation

ProRequires a Planes Pro license.
pnpm dlx shadcn add @useplanes/gradient-footer

Works once the @useplanes registry is set up in your project (one-time). After that, copy and run commands directly.

Unlock with Planes Pro

$99 once · 170 Pro components · lifetime updates.

import { GradientFooter } from "@/components/ui/GradientFooter";

<GradientFooter
  brand={{ name: "fieldnote", href: "/" }}
  columns={[
    { title: "Product", links: [{ label: "Pricing", href: "/pricing" }] },
    { title: "Company", links: [{ label: "Careers", href: "/careers" }] },
  ]}
  languages={[
    { value: "en", label: "EN" },
    { value: "de", label: "DE" },
  ]}
  onLanguageChange={setLocale}
/>

Use cases

  • Marketing site footer

    A full sitemap that still ends the page on colour rather than a grey slab.

  • Localised product

    The language picker sits in the bottom corner where people look for it, using the native menu on phones.

  • Launch or campaign page

    Set colors to the campaign palette and the gradient carries it without touching the type.