Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Split Browser Frame List Features Block for React

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.

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 reverse split features section for React with Base UI. At the start, a browser window drawn in greyscale inside a hairline frame with + marks on its corners: three dots and an address bar, a storefront page as skeleton blocks, and a devtools network panel docked under it with request names, sizes and bars on a timeline, one marker showing where the largest paint lands. At the end, a compact header, four icon rows ruled like a table, and a Shine Button with an outline button. The copy is first in the DOM, so it also comes first on a phone. It's built from Guides, Shine Button and Button. For performance, monitoring and developer tools that show what happens behind 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, rendered as a ruled list with an h3 each.

How do I change the waterfall?

Edit REQUESTS: each has a name, a size, a start, a wait and a receive time in milliseconds. Bar positions are shares of SPAN, the timeline's length, and LCP places the marker. Change SPAN and the tick labels together.

Where do the buttons go?

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

Is the window read by screen readers?

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

Does the timeline mirror in a right-to-left layout?

No. The network panel is a timeline, so it keeps its direction in every layout, like a chart. The rest of the block mirrors.

How does it fit a phone?

The copy comes first and the window sits under a hairline at a fixed height. The storefront page and the size column drop away so the waterfall keeps its width; the foot fades out.

  • 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

    Browser Chrome Card Grid Features

    Card grids

    Six starter pages for a site builder, each card a browser window with three dots and an address pill over a greyscale skeleton of a pricing page, blog, checkout, docs, dashboard or 404.

  • Pro

    Alternating Mockup Rows Features

    Alternating rows

    Three alternating bands for a support back office, each pairing a sentence with a browser window that holds a different admin screen: a filtered ticket table, a settings form with toggles and a weekly chart with its legend.

  • 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 Browser Frame Hero

    Product windows

    A showcase hero with start-aligned copy, a band of three checklist cells and a browser window in a hairline frame showing a deployments list.

  • 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.

All 170 features blocks