Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Split Browser Frame List Features Block for Radix UI

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 Radix 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 takes asChild with the link inside, so it can be your router's link.

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.

All 170 features blocks