Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Footer blocks

Pro

Open Source Footer Block for React

An open-source footer for a state-management library: link groups, then a project band with a star-count button, a licence badge, contributor avatars and a Good first issues link.

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

An open-source footer for React with Base UI. The wordmark and one sentence sit beside three link groups (Docs, Community, Project) in the nav labelled Footer. Under a ruled band, the project's own facts: a star-count button and an MIT licence badge at the start; six contributor avatars with a "+148" count, the total in words and a Good first issues link at the end. A legal band closes the footer. The counts are example data. It's built from the catalog's GitHub Stars Button, Badge, Avatar, Guides and your theme's tokens.

FAQ

Where does the star count come from?

From the count prop, which the block sets to an example figure: the button shows it and never fetches. Pass your own number from your server or build. If you leave count out, the button asks GitHub once per repository per page load, in the visitor's browser, and shows just its label if that fails. Set username and repo to your repository; the link opens it in a new tab.

Are the contributors real?

No. The six avatars are initials in the CONTRIBUTORS array and "+148" is the MORE constant: the total ("154 contributors") is their sum. Replace them with your own figures, or give each Avatar an image. The avatar stack is decorative and hidden from screen readers; the sentence beside it carries the number.

How do I change the licence?

Edit the badge's label (and its icon, if you like) in the project band, and the Licence link in the Project group. It is a plain outline Badge, not a control.

Why isn't there a Shine Button?

A project footer has no main action, so the block has no primary control: the star button is an outline button, and Good first issues is a text link with an arrow that mirrors in a right-to-left layout.

How does it fit on a phone?

The groups sit two by two under the wordmark, the project band stacks its two clusters and the legal row stacks. Nothing scrolls sideways at 320 pixels.

  • 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.

  • Pro

    Documentation Footer

    Sitemaps and trails

    A documentation footer for a router library's docs: previous and next page cells, an Edit this page link with a pencil, four link groups and a legal band.

  • Pro

    Community Footer

    Content and updates

    A community footer for forum software: a recurring calendar of three rows (cadence, name, kind badge, Join link), a plain row of community channels and a legal band.

  • Pro

    Blog Footer

    Content and updates

    A blog footer for a data-engineering blog: topic pills with post counts, the two latest posts and an RSS link on one side, two link groups on the other.

  • Pro

    Link Columns Footer

    Link grids

    The classic link-column footer for an email API: a brand column with the wordmark, one sentence and four social links, four groups of links behind a split divider, and a legal band with the copyright and the policy links.

  • Pro

    Install Command Hero

    Code and terminal

    A compact centred hero for an open-source library with a star count pill, an install command to copy, a Shine Button, a GitHub star button and a ruled band of the repository's stats at the foot.

All 100 footer blocks