Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Zigzag Screenshot Rows Features Block for React

Four alternating feature rows for a team workspace, each with a badge, a title, three ticks and a framed drawing: a graph of linked docs, a rule builder, a global search and a live document.

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

Four alternating rows for React with Base UI, under a centred header. Each row pairs an outline badge, a title and three ticks with a framed drawing that is none of a browser, a table or a chart: a graph of linked docs, a rule builder (when, if, then), a global search with ranked results and a live document with named cursors and a comment. The drawing swaps sides from row to row, so the split divider zigzags down the block with a + mark where it meets each row's rule. The copy comes first in the DOM and on a phone. It's built from Avatar, Badge and Guides. For workspaces, productivity tools and any product with four flagship capabilities.

FAQ

How do I change the rows?

Each row's copy is a Step (badge, title, three ticks) at the top of the file, and its drawing is a component of its own. Swap a drawing by passing another one as the row's child. A row's reverse prop sets the side.

How do I change the graph of docs?

Edit the node constants (HUB, ROADMAP and so on, each with a position and a radius in a 400 by 240 space) and EDGES. The drawing scales with its frame and keeps its shape.

Are the drawings read by screen readers?

No. Each drawing is decoration, hidden from assistive technology and not focusable. The badge, the title and the three ticks carry the content, and each is a heading or a list item.

Why does the copy come first on every row?

Reading order stays the same on every layout: the copy is first in the DOM and a reversed row only moves it with grid placement from lg. A phone shows the copy first, then the drawing.

What moves, and what happens with reduced motion?

The header fades up once when the page loads, with a CSS transition. Nothing else moves. With reduced motion the transition is off and the section simply appears.

How does it fit a phone?

Each row stacks: the copy, then its drawing in a shorter frame whose foot fades out. The block ends on the last row, with no closing rule under it.

  • Pro

    Numbered Alternating Rows Features

    Alternating rows

    Four numbered steps for a feedback-triage tool as alternating bands, each with an outlined numeral, a paragraph and a drawing of the step on the other side of a split divider.

  • 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

    Alternating Rows Features

    Alternating rows

    Two plain alternating rows for a design-system kit in one box of shared hairlines: a permissions card with three toggles, and a notification card over a stack of avatars.

  • Pro

    Alternating Device Frame Rows Features

    Alternating rows

    Two alternating rows for a transit app, each pairing a sentence with a phone drawn as a ring on a hairline floor: the trip planner with line chips and the live arrivals with countdowns.

  • 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

    Bento Grid Features

    Bentos

    A bento of five features for an issue tracker, each cell drawn as the product at work: a live board with teammates' cursors, a pull request, a burndown, a triage rule and a typed SDK, in cells that share their hairlines.

All 170 features blocks