Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Stats Ribbon Over Grid Features Block for React Aria

A features section for payments infrastructure: a compact header with two buttons, a slim ribbon of four stat chips between hairlines, and three cells led by a settlement timeline, ledger rows and a payout schedule.

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 features section for React with React Aria. A compact header holds the Shine Button and an outline button at its end. Under it, a slim ribbon runs between two hairlines with + marks on the rails: four stat chips in small type, a value and a label each, two by two on a phone. Below, a separate row of three cells is led by drawings (a payment's settlement timeline, ledger rows whose debits and credits cancel, and a week of payouts with the next one filled), each with a title and a sentence. The cells sit apart with overshoot lines. It's built from Guides, Shine Button and Button. For payments, finance and infrastructure products.

FAQ

How do I change the ribbon?

Edit STATS: each has a value and a label. They render as a list; each value is wrapped in a bdi element so a right-to-left layout keeps units in order. Keep them short: the ribbon is four chips on one line from lg.

How do I change the three cells?

Each cell is a title, a sentence and a drawing component (TimelineDrawing, LedgerDrawing, ScheduleDrawing) passed as its child. Their data are STAGES, ENTRIES and PAYOUTS at the top of the file.

Where do the buttons go?

Both are links (href="#") at the end of the header: Start building is a Shine Button and Talk to sales an outline button. Each button renders a link when it has an href.

Are the drawings read by screen readers?

No. Each drawing is decoration, hidden from assistive technology and not focusable. Each cell's title and sentence carry the content, and the ribbon is a real list.

What moves, and what happens with reduced motion?

The header, the ribbon and the cells fade up once when the page loads, with a CSS transition. With reduced motion the transition is off and the section simply appears.

How does it fit a phone?

The header's buttons wrap under the text, the ribbon goes two chips across, and the three cells stack one per row, each with its drawing on top.

All 170 features blocks