Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Split Screenshot With Stats Features Block for React

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.

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 split features section for React with Base UI. At the start, a compact header, four ticked rows and a Shine Button with an outline button. At the end, an audit log in a hairline frame with + marks on its corners: a search field and filter chips, rows that name who did what and when, one of them opened to show its details, and, docked inside the window's foot, a strip of three figures between hairlines (events a day, retention, export time). The figures are a description list in the window, not cards floating over it. It's built from Avatar, Data List, Guides, Shine Button and Button. For security, compliance and infrastructure products that sell trust with numbers.

FAQ

How do I change the four rows?

Edit TICKS at the top of the file: each has a title and a sentence, rendered as a list with an h3 each.

How do I change the three figures?

Edit STATS: each has a label and a value. They are a real description list, so a screen reader hears "Events a day, 4.2M", and each value is wrapped in a bdi element so a right-to-left layout keeps units in order. The log rows above them are decoration.

Where do the buttons go?

Both are links (href="#") under the rows: Try the audit log is a Shine Button and Read the security docs an outline button. Each button renders the link it's given with render, with nativeButton={false}.

Is the audit log read by screen readers?

No. The filter chips and rows are decoration, hidden from assistive technology and not focusable. The ticked rows and the three figures carry the content.

What moves, and what happens with reduced motion?

The text and the window 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 copy comes first and the window follows under a hairline. The strip of figures stays three across at the foot of the window, and the last filter chip drops away.

  • Pro

    Split Aspect Ratio List Features

    Split with mockup

    A split features section for a client-reporting tool: a headline, four icon rows and two buttons beside a tall 3:4 report page that sits against the rail and fades out at the foot.

  • Pro

    Split Mockup Icon Checklist Features

    Split with mockup

    A reverse split features section for a planning canvas: a square canvas in a card in card with linked cards and two named cursors, beside four icon rows and two buttons.

  • 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

    Split Browser Frame List Features

    Split with mockup

    A reverse split features section for a web-performance tool: a framed browser window with a devtools network waterfall docked under the page, beside four ruled rows and two buttons.

  • 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

    Dark Inset Split Mockup Features

    Split with mockup

    A card-in-card features section for a document editor: three ticked capabilities beside a framed drawing of the editor with comment threads running off the foot.

All 170 features blocks