Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Alternating Mockup Rows Features Block for React Aria

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.

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 features section for React with React Aria that shows admin screens in browser windows. Three bands share one page column, each a narrow cell of copy (a badge, a heading, a sentence and a text link) beside a wide cell holding a browser window with three dots and a path. The cells swap sides from band to band, so the split divider between them zigzags down the page, with a + mark where it meets each band's rule. The windows draw three different screens in greyscale: a ticket table with filter chips and a count, a settings form with toggles and a field, and a weekly bar chart with a legend and totals. The page's rails and top rule come from the Guides spine. For admin tools, dashboards and any product that is best explained by a few of its screens.

FAQ

How do I change what a window shows?

Each window is a small component (TicketsScreen, SettingsScreen, ChartScreen) inside a shared BrowserWindow. Edit the data lists at the top of the file (TICKETS, RULES, DAYS) to change the rows, the toggles and the bars. The chart's heights and totals are worked out from DAYS, so a new number changes the bar, the legend and the total together.

Are the toggles and buttons in the windows real?

No. The windows are pictures of the product, so they are hidden from assistive technology and hold nothing you can focus: the heading and sentence beside each say what it shows. Keyboard users move from one row's link to the next.

How is the zigzag divider drawn?

Every row is a two-column grid, 2fr 3fr or 3fr 2fr, and the divider is the start border of whichever cell comes second on the page, with a + mark where it meets the row's rule. Flip a row by passing flip, which swaps the columns and moves the border; the copy stays first in the reading order.

Does it follow my theme?

Yes. The windows use theme tokens only: light on a light page, dark on a dark one, in any preset. Selected chips, toggles that are on and the primary bars use the foreground colour, so the page's one primary colour stays free for a real button.

What moves, and what happens with reduced motion?

The header fades up once on load and the link arrows slide on hover. Nothing else moves. With reduced motion the transitions are off and the section simply appears.

How does it fit on a phone?

Each band stacks with its text first, then the window, which shows only its top part and fades out at its foot. The divider is hidden while stacked and each band keeps its rule. Nothing scrolls sideways at 320 pixels.

All 170 features blocks