Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Footer blocks

Pro

Community Footer Block for React Aria

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.

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 community footer for React with React Aria. A calendar of recurring gatherings, in bands. The wordmark and one sentence sit under the page's top rule; then "Meet us, every week" over three ruled rows, each one a cadence ("Every first Thursday"), a name, a badge for the kind of gathering (Meetup, Office hours, Chat) and a Join link. Under them, a plain row of community channels in the nav labelled Footer, and a legal band. It's built from Badge, Guides, plain links and your theme's tokens, and it is a static component with no state.

FAQ

Why are there no dates?

The rows state a cadence ("Every first Thursday", "Every Tuesday", "Open every day"), not a date, so the footer is true whichever week it's read and never goes stale. If a gathering needs a date, render it from your own data at build or request time, in a time element.

How do I change the gatherings?

Edit the GATHERINGS array at the top of the file: each entry has a when, a name and a kind (the badge's text). The three kinds in the block are Meetup, Office hours and Chat. Point each Join link at its page.

How is each Join link named?

The visible text is "Join", followed by the gathering's name in text only screen readers hear ("Join Berlin meetup"), so a list of links is never three identical "Join"s.

Are the channel icons real brands?

No: each channel has a generic glyph (a speech bubble, a hash, a feed, a branch) and its name in text, in the CHANNELS array. Swap in your own names and links; keep the name visible so the icon is never the only label.

How does a row fit on a phone?

Each row stacks its cadence above its name, with the badge and the Join link at the end, and the channels wrap. Nothing scrolls sideways at 320 pixels.

All 100 footer blocks