Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Alternating Stripe Sections Features Block for Ark UI

Three tinted stripes for a CI platform: pipeline runs beside their copy, an environments table beside its copy, then a centred statement over a three-cell grid of build figures.

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 Ark UI made of full-width stripes. Three bands run between the page's rails, each with its rule and + marks drawn by Guides: the first and third are tinted a step darker, the middle one plain. The first stripe puts its copy beside a list of pipeline runs, each with a dot, a commit message, a state written in words and a time. The second mirrors it, with an environments table (name, version, deploy time, health). The third is a centred statement over a three-cell grid of build figures. The drawings are built from the Status dot, Badge and theme tokens, with a destructive dot only on the one failed run. For CI, deploy and developer-platform products that want a long, calm page with a rhythm of bands.

FAQ

How do I change the runs, environments and figures?

Edit RUNS, ENVIRONMENTS and FIGURES at the top of the file. A run's state is one of passed, running, queued or failed and picks its dot and its label; an environment's ok flag picks a filled dot or a ring. The figures are plain strings, written in a bdi element so units keep their order in right-to-left layouts.

Why is only one run red?

State is carried by words and by the shape of the dot (filled, ring, destructive), never by colour alone, and the status colours stay rare so a failure is easy to spot. Passed runs use the foreground dot, queued and running runs a ring, and the one failed run uses the destructive status token.

How are the stripes tinted?

The tint is on each stripe, inside the page column, and the column itself has no background, so the rails and the top rule stay clean. Each stripe's rule comes from Guides rather than a border, so the + marks land on the line. Pass tinted to a stripe to tint it.

Are the drawings interactive?

No. The runs list and the environments table are pictures of the product, hidden from assistive technology and inert, so nothing in them takes focus. The heading and sentence beside each say what it shows, and the link under it is the only control.

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 stripe stacks with its text first. The runs list and the environments table show three rows, and the table drops its deploy-time column, so nothing scrolls sideways at 320 pixels. The three figures stack one per row.

All 170 features blocks