Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Split Dark Mockup List Features Block for React

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.

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 and a Shine Button with an outline button. At the end, a flat profiler window fills its half edge to edge, with no frame and no inset: a toolbar, an icicle flame graph drawn in the foreground colour at stepped weights, one hot frame drawn inverted, a detail line for it and a self-time list that fades out at the foot. The block follows your theme: its contrast comes from the dense bars, not from a dark scope. It's built from Guides, Shine Button and Button. For profilers, tracing and developer tools.

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, rendered as a list with an h3 each.

How do I change the flame graph?

Edit FRAMES: each has a depth, a name, a start and a width in thousandths of the profile. Bars are placed with CSS from those numbers, and HOT names the frame that is drawn inverted. Frames narrower than LABEL_MIN show no name.

Where do the buttons go?

Both are links (href="#") under the rows: Profile your app is a Shine Button and View a live demo an outline button. Each button renders the link it's given with render, with nativeButton={false}.

Is the window dark?

No. There is no dark scope: the bars use your foreground colour at stepped weights, so the graph is dark on light in a light theme and light on dark in a dark one.

Is the window read by screen readers?

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

How does it fit a phone?

The copy comes first and the window follows under a hairline at a fixed height, with its foot faded out. The graph keeps its shape and shows names only on frames wide enough to hold them.

  • 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

    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.

  • 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 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 Layout Dark Terminal Hero

    Code and terminal

    A split hero for an API: the headline, a Shine Button and three ticks beside a dark terminal with a request, a status and a JSON response that writes itself out, above a band of three figures.

  • Pro

    Image Background Overlay Cards Features

    Split with mockup

    A feature section for a roadmap planner that lays a frosted headline chip and three raised feature tiles over a wide greyscale roadmap drawing, with no photo: the product is the background.

All 170 features blocks