Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Footer blocks

Pro

Community Footer Block for React

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 Base UI. 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.

  • Pro

    Open Source Footer

    Social proof

    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.

  • 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

    Support Hub Footer

    Company and places

    A support-hub footer for a help-desk product: a question and a row of help links, then three support channels as cells, live chat with an online status, email with its reply time and phone with its hours, each one link.

  • Pro

    Latest Posts Footer

    Social proof

    A footer showing the latest post from three channels as cells that share their hairlines, each a drawn mark, a time, one sentence and a View post line, with a Follow row of counts, then the wordmark and one row of links.

  • Pro

    Open Roles Footer

    Company and places

    A footer for a hiring studio: the wordmark and two link groups, then a band of three open-role rows, each one link with the role, team, place and a type badge, under a count and a Shine Button to all the roles.

  • Pro

    Stacked Bands Footer

    Slim and minimal

    A footer in three ruled bands: the wordmark, a sentence and the shop's pages; five social links with their names; and the legal row.

All 100 footer blocks