Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Footer blocks

Pro

Partner Programme Footer Block for React

A footer for a partner programme: the pitch with an Apply Shine Button, three partner types as cells (Referral, Reseller, Technology) each saying what you get and the commission, then the wordmark and two link groups.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A partner-programme footer for React with Base UI. The first row holds the wordmark with one sentence, the pitch ("Partner with Wexmoor") with an Apply Shine Button, and, at the end, two link groups (Programme and Company) in a nav labelled Footer. Under it, three cells, one per partner type (Referral, Reseller, Technology), each with a heading, one line, and a small list that says what the partner gets and what the commission is. The cells are drawn with hairlines that run a little past their corners, set apart by a wide gap. A legal band closes the page. On a phone everything stacks. The terms are made up, and the block has no JavaScript of its own.

FAQ

How do I change the partner types and the terms?

Edit the TYPES array at the top of the file: each type has a name, a line, what the partner gets and the commission. Three cells fill the grid from lg; a fourth type needs lg:grid-cols-4. Percentages sit in a bdi so they read the right way round in right-to-left text.

Why do the cells have a wide gap?

Each cell draws its own lines, and they run a little past the corners. The gap between cells keeps those overshoots from touching their neighbours, and the grid is inset from the page rails for the same reason.

Where does the Apply button go?

It is a Shine Button rendered as a link, so point its href at your application page. It is the footer's only primary action; the cells are information, not links.

How do screen readers move through it?

The cells are a list; each has an h3 for the type and a description list pairing "You get" and "Commission" with their values. The link groups sit in a nav labelled Footer, each group a small h2 over a list.

How does it fit on a phone?

The wordmark, the pitch and the button come first, then the two link groups side by side, then the three cells one under another, so the navigation stays near the top.

Is the programme real?

No. Wexmoor, its partner types and its commission rates are invented for the example; replace them with your programme's terms.

  • Pro

    Dual Audience Footer

    Calls to action

    A footer for a design tool with two audience cells on one hairline, builders and teams, each with a sentence, three points and its own action, over a row of links and a legal band.

  • Pro

    Call To Action Cell Footer

    Calls to action

    A footer for a workflow tool whose call to action is the last cell of the link grid: a brand and three link groups beside a card in a card with a small flow drawing, a title, one line and a Shine Button.

  • Pro

    Company Facts Footer

    Company and places

    A company footer for a construction-software firm: a brand with a facts list (founded, headquarters, people, customers, company number) and two link columns in cells sharing hairlines, then a slim band.

  • Pro

    Trust Centre Tiles Footer

    Trust and compliance

    A footer for a payments checkout whose three tiles (Security, Privacy, Compliance) share hairlines, each with an icon, a quiet Current status, one line and three links.

  • Pro

    Integration Directory Footer

    Products and catalogs

    A footer for an integrations hub with the brand and three link groups behind a split divider, and a directory of four category cells (Data, Messaging, Auth, Billing) listing sixteen integrations with monogram tiles.

  • Pro

    Developer Hub Footer

    Products and catalogs

    A developer-hub footer for a secrets manager: SDK tabs (TypeScript, Python, Go) with an install command, a copy button and the version, beside three link groups.

All 100 footer blocks