shadcn.io is not affiliated with official shadcn/ui
Zigzag Screenshot Rows Features Block for Solid
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.
Installation
Overview
Four alternating rows for Solid with Ark 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.