Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Footer blocks

Pro

Open Source Footer Block for React Aria

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 React Aria. 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.

All 100 footer blocks