Footer blocks for every framework.

The 100 footer blocks close a page: link columns, newsletter sign-up, language and theme controls, status rows, legal rows and sitemaps. Most draw no closing rule of their own, since the footer ends the page.

They are sorted into 13 groups: Link grids, Sitemaps and trails, Slim and minimal, Brand-led, Trust and compliance, Social proof, and more. Some are plain link grids, others add a newsletter, trust and compliance notes, preferences, calls to action or live estimates.

Link Columns Footer is the classic brand column with four link groups. One Row Footer is the slim single line. Accordion Footer folds the groups into rows at every width. Digest Chooser Newsletter Footer carries a sign-up, and Giant Wordmark Footer leads with the brand.

A comment describes the footer, then typed arrays hold the link groups (a label and an href each) and the legal text, and the component renders them in a nav labelled Footer. The hrefs are # placeholders and the brand is a made-up one.

Edit the link-group array: each group has a title and a list of links with an href and a label. The footer maps over it into a nav, so adding a link or a group is a data change. Replace the # hrefs with your routes or, in Next.js, switch the anchors to Link.

The newsletter footers check the address on submit, show errors under the fields and then swap in a confirmation. A comment marks the spot where you send the email to your mailing-list provider, and the demo only waits there. Digest Chooser Newsletter Footer also sends which digests were ticked.

Language Selector Footer rewrites the footer's words from one typed dictionary and marks each rewritten part with its lang attribute. Replace the dictionary with your i18n messages and have the control switch your locale route instead of local state.

Theme Toggle Footer cycles light, dark and system and really switches the page by toggling the dark class on html. If you use next-themes, the file's own comment says to call its setTheme in the apply function and read theme for the button.

Cookie Consent Footer is an entry point, not a banner: a Cookie settings button opens a dialog with one switch per category (essential is locked on), and Save choices shows the result in the legal row. It keeps the choice in state only, so write it to a cookie or your consent tool where it saves.

This page lists 100 of the category's 100 footer blocks for React on Base UI. The category comes in React (Base UI, React Aria, Ark UI and Radix UI), Vue, Svelte and Solid; the framework and UI library pickers at the top of any block's page switch between them.

The footer blocks here are written on Base UI primitives; the layout, the copy and the theme tokens are the same on every base, and the install path follows it (/r/footer-accessibility.json). The other bases are one picker away from /footer-block.

Each block is TypeScript and Tailwind CSS v4, styled with your theme's tokens, and imports our components (installed with it) on Base UI. Icons come from lucide-react.

Open a block, copy its command and run it: `npx shadcn@latest add` with the block's registry URL, such as /r/footer-accessibility.json for Accessibility Statement Footer. The code is copied into your project and it's yours to edit.

The block's file and the components it imports: Accessibility Statement Footer brings Data List and Guides, installed before it. Nothing else changes in your project.

Use the filters above the grid: 13 kinds of footer block, led by trust and compliance (13), link grids (11), company and places (10) and social proof (9), and sort by popular or name. A good first look: Accessibility Statement Footer, Accordion Footer and Oversized Email Footer. Each card opens the block's live page.

Every block draws the same page column and side rails with a top rule only (the Guides component), so a footer block lines up with the one above and below it. Stack one per section and the rails read as a single drawing; pick across the layout, what it shows and actions kinds.

Open its page and use the full-screen viewer (/view/footer/accessibility) or the device-width previews. Every preview is free for everyone; only the code needs Pro.

Each footer block uses semantic HTML: one heading level, real lists and labelled controls. Interactive parts sit on Base UI, a headless library that follows the WAI-ARIA patterns, and the layouts use logical properties so they hold in right-to-left languages.

Yes. They use semantic tokens only (bg-card, text-muted-foreground), never palette colors, so they follow your preset, radius and dark mode. The primary color marks one action per block and is never a background.

No animation library: the footer blocks' motion is CSS (transitions, entrance animations and SVG), and it stands still under prefers-reduced-motion.

The previews are free for everyone. The code of all 100 footer blocks is Pro, as is every block: Pro unlocks the code, the install command and the MCP.

Only with a Team or Organization license: client work, SaaS products and anything your users pay for. The Individual license is for personal, non-commercial projects. See the license page for the full terms.

You keep using what you installed in your existing projects, but get no new downloads or updates, and the MCP stops answering. A Lifetime license includes all future updates.

No. You can use them in your own End Products, but not redistribute the code or designs on their own, or in a UI library, kit, template or website builder.

With Pro, yes: the MCP server (22 tools, one personal URL from /dashboard/mcp) lets your agent search_blocks for a footer block, read it with get_block and install it on your React on Base UI stack.

Pass `category: "footer"` to search_blocks to search only the 100 footer blocks, or to list_blocks for the 13 groups with their blocks. get_block then returns one with its install command.

plan_page plans a page as a stack of blocks for a brief. Pass `sections` with category ids, such as ["hero", "footer", "footer"], to force the order; each section gets a pick and two alternatives, and get_block installs the stack.