Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Footer blocks

Pro

Availability Portfolio Footer Block for React

A centred one-person footer for a freelance designer: an avatar with initials, the name, a one-line bio, an availability line with a status dot, four social links with names and a row with the nav and the copyright.

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 personal footer for React with Base UI, for a freelancer's portfolio. Everything is centred on the page column with no bands: an avatar carrying the designer's initials, the name, one line about what they do, and an availability line with a status dot ("Taking on projects from next month"). Under it, four social links, each a neutral glyph and the network's name, and a last row with the nav labelled Footer (four links) and the copyright. On a phone the last row stacks. There is no photo, so nothing to load, and no JavaScript of its own.

FAQ

How do I change the availability line?

Edit the sentence next to the status dot. It uses a relative phrase ("from next month") rather than a date, so it does not go stale; change it when your calendar changes. The dot is decorative and the sentence carries the meaning.

Can I use a photo instead of initials?

Yes. Add an AvatarImage with an alt of your name inside the Avatar; the initials stay as the fallback while it loads. The avatar is hidden from screen readers because the name sits right under it.

Why do the social links show generic icons with names?

The icon set has no brand logos, and a row of unlabelled glyphs leaves people guessing. Each link shows a neutral glyph and the network's name, which is also its accessible name.

How do screen readers move through it?

The name is an h2, the social links are a list named Follow Lowell, and the four page links sit in a nav labelled Footer. Every link shows the theme's focus ring.

How does it fit on a phone?

The layout is already one centred column, so only the last row changes: the nav wraps and the copyright drops under it.

Is Lowell a real person?

No. Lowell Hart and the bio are made up for the example; replace them with your own.

  • Pro

    Oversized Email Footer

    Brand-led

    A footer for a studio built around one huge mailto link, with project-type chips that really add to the link's subject line, then the wordmark, an address and two link groups.

  • Pro

    Centered Plumb Line Footer

    Slim and minimal

    A centred footer in three tiers: a hairline hanging from the top rule to a round wordmark mark, a row of six links, and the copyright line.

  • Pro

    One Row Footer

    Slim and minimal

    The smallest footer: one row on the spine with a wordmark and a copyright line at the start and four inline links with a drawn underline at the end.

  • Pro

    Social Icons Footer

    Slim and minimal

    A two-row footer: a wordmark and tagline beside five social icon buttons with tooltips, and a ruled band with the copyright and the policy links.

  • Pro

    Founders’ Note Footer

    Brand-led

    A footer led by a short first-person note from two founders: a heading, three sentences, each founder with an avatar, a drawn signature and a role, and a Reply to us link, beside a divider with the wordmark and one row of links.

  • 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