Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Footer blocks

Pro

Official Site Strip Footer Block for React Aria

A footer for a county permits office with a tinted official-site strip and a How you know button, a drawn county seal, three link groups, a row of required links and a reviewed-quarterly line.

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 footer for a public office for React with React Aria. A tinted strip at the top says "An official website of Esker County" and carries a "How you know" button that opens two short statements (an official web address, a secure connection). Under a ruled band come a drawn county seal, the office's name, a sentence and its hours beside three link groups in a nav labelled Footer, a row of the links a public site must carry (accessibility, public records, privacy, contact officials), and a last band with the copyright and "Page reviewed quarterly". The county, its seal and its web address are fictional, and the statements are example wording: use your own domain and the text your jurisdiction requires. It's built from Guides, a Collapsible, a drawn SVG seal and your theme's tokens.

FAQ

How do I change the official-site strip?

Edit the name in the strip and the two entries of the STATEMENTS array (an icon, a title and a sentence each). The strip is a tinted panel inside the footer's column, so the page rails still run through it. Never claim an official status you do not have: a strip like this belongs only on a real public body's site.

Can I use my own seal?

Yes. The seal is a drawn SVG made of rings, a ring of ticks, hills, a river and a sun, hidden from assistive technology because the office's name sits next to it in text. Replace the component with your own img (give it an empty alt while the name stays beside it) or a differently drawn mark.

Is the How you know content in the page when it is closed?

On every target but Radix the statements stay in the page, hidden until the button is pressed. The button is a real button with aria-expanded, it works with Enter and Space, and its label never changes.

What does the reviewed line promise?

It says the page is checked on a cadence ("quarterly") instead of a date, so it never goes stale by itself. Only keep it if somebody really does review the page on that schedule.

How do screen readers move through it?

The block is a footer, the content-info landmark. The link groups are one nav labelled Footer with an h2 per group, "How you know" is an h2 button, the statements have h3s, and the required links are a labelled list. The opening hours are time elements.

All 100 footer blocks