Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Split Aspect Ratio List Features Block for React

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.

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 icon rows laid out two by two, and a Shine Button with an outline button. At the end, a tinted cell holds a tall portrait page in a 3:4 ratio: a report title, three figures, a bar chart of weekly sessions and a channel table. The page touches the end rail and runs off the foot under a mask, so it reads as one sheet of a longer document. A hairline divider with a + mark joins the two halves. It's built from Guides, Shine Button and Button. For reporting tools, dashboards and any product whose output is a page.

FAQ

How do I change the four rows?

Edit FEATURES at the top of the file: each has a Lucide icon, a title and a sentence. They render as a list with an h3 each, two across from sm and one per row on a phone.

How do I change what the page shows?

ReportPage draws it from three small lists: FIGURES, WEEKS (bar heights in percent) and CHANNELS. The page keeps a 3:4 ratio at every width because its width comes from its cell and its height follows the ratio.

Where do the buttons go?

Both are links (href="#") under the rows: Build a report is a Shine Button and See a sample an outline button. Each button renders the link it's given with render, with nativeButton={false}.

Is the report page read by screen readers?

No. The page is decoration, hidden from assistive technology and not focusable. The four rows carry the content.

What moves, and what happens with reduced motion?

The text and the page 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 page sits under a hairline in a shorter cell, still against the end rail and faded at its foot. The rows go one per line and the buttons wrap.

  • 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

    Split Dark Mockup List Features

    Split with mockup

    A split features section for a profiler: four icon rows and two buttons beside a flat profiler window that fills its half edge to edge, with a dense flame graph, one hot frame and a self-time list.

  • 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

    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

    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