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

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 Base UI. 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 the link it's given with render, with nativeButton={false}.

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.

  • Pro

    Metric Hero Strip Features

    Metrics and charts

    Four metric-over-feature columns for a data-pipeline tool: a giant tabular figure and label, then the feature that makes it true, in one divided band under a centred header.

  • Pro

    Split Screenshot With Stats Features

    Split with mockup

    A split features section for an audit-log service: four ticked rows and two buttons beside a framed audit log with a strip of three figures docked inside its foot.

  • Pro

    Dotted Corner Card Grid Features

    Card grids

    Six schematic cards for a diagramming tool, each a small line diagram of a queue, fan-out, funnel, retry loop, cache or gate with a dot travelling its path, in cells that end in corner marks.

  • Pro

    Command Center Metric Board Features

    Metrics and charts

    A metrics console in a card in a card that follows your theme: six metric tiles with a value, a signed change and a sparkline are the tabs of one tablist, and choosing one opens a larger chart of its series in a strip below.

  • Pro

    Split Stat Overlay Hero

    Stats and live data

    A split hero for a live revenue dashboard: the headline, a checklist and a Shine Button beside a dashboard sketch in a hairline frame, with three stat cards (revenue, users, churn) floating over its edges.

  • Pro

    Achievement Trophy Wall Features

    Metrics and charts

    A wall of eight milestone badges for a language-learning app: unlocked ones solid, locked ones muted with a lock and a progress bar, a header count, and a tooltip with each unlock rule.

All 170 features blocks