Gradient Footer
ProInstallation
ProRequires a Planes Pro license.
pnpm dlx shadcn add @useplanes/gradient-footerWorks 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.