Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Footer blocks

Pro

Customer Result Footer Block for React Aria

A footer for a dock-scheduling tool with one customer result: a big 38% figure beside a before and after bar pair in a framed figure, a Read the story button, and two link groups.

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 one-result footer for React with React Aria. At the start, the wordmark and one sentence sit over two link groups in a nav labelled Footer. Behind a split divider that runs from the spine's top rule to the end of the page, a customer story: a framed figure with a large "−38%", a pair of drawn bars for the waiting time before and with the product, a caption naming the customer, and the one Shine Button, "Read the story". A legal band closes the page. On a phone the links come first, then a rule and the story. The figures are example data, and the bars are drawn from them. It's built from Guides, a Shine Button, plain links and your theme's tokens.

FAQ

How do I change the result?

Edit the READINGS array for the two bars (a label, the minutes text, a width class and a fill) and the figure and caption in the JSX. The percentage is typed, so keep it in step with the two readings: here 46 of 74 minutes is a 38% cut and the second bar is 62% as wide. The numbers are example data for a made-up customer.

Are the bars a chart?

They are a drawing: two rounded bars whose widths follow the two readings, hidden from assistive technology, because the same numbers are in the caption ("from 74 to 46 minutes"). They have no axis, so they only show the direction and the size of the change.

What does Read the story do?

It is a link: point its href at the case study. It is the block's one primary control, a Shine Button, and the only one in the footer. The Shine Button takes asChild around an a. The Shine Button takes an href and renders a link.

How do screen readers move through it?

The block is a footer element. The links sit in one nav labelled Footer. The story has an h2 ("Customer story") and a figure whose figcaption says what the numbers mean. The big "−38%" is in a bdi so its sign and unit stay together in right-to-left text.

How does it fit on a phone?

The brand and the two link groups come first, then a rule, then the story with the figure over the bars and the button under the frame, then the legal band. Nothing scrolls sideways at 320 pixels.

All 100 footer blocks