shadcn.io is not affiliated with official shadcn/ui
Alternating Chapters About Block for Radix UI
A company story in three alternating split rows, each with a time, a title, a paragraph, a one-line metric, a pull quote and a greyscale drawing of the product at that chapter, the sides swapping row to row.
Installation
Overview
A chaptered company story for React with Radix UI, written for Chapterhouse, a fictional learning platform. Three rows tell it in order, "Year 1", "Year 3" and "Year 5", and each is a band ruled from rail to rail and split down the middle by a hairline. One side holds the chapter's text: a time badge, a title, a paragraph, a one-line metric ("1,200 learners in the first course") and a pull quote with its author. The other holds a small greyscale drawing of the product as it was in that chapter, built from our own components: a lesson page, a cohort board, a grid of learning paths. The drawing and the text swap sides from one row to the next, and the text is first in the document order on every row, so a screen reader and the tab order read the story straight down. On a phone each row stacks, text first, with a rule between rows. It's built from Badge and Guides with your theme's tokens for every colour and no state. For about pages that tell a company's growth as a few big chapters. The company, its metrics and the quotes are example content.
FAQ
How do I change the chapters?
Each chapter is a constant at the top of the file (ONE, TWO, THREE) with its badge, title, paragraph, metric and measure (the figure and what it counts), and the quote with its quoteBy. The three rows are written out at the bottom, each with its drawing as a child and a flip that says which side the text takes, so adding a fourth chapter means adding a constant, a drawing and a row.
Are the drawings images?
No. They are built from the same tokens as the rest of the page and hidden from assistive technology, because the text beside each one says what it shows. They follow the theme, light or dark, and use the foreground colour for their selected states so the page's primary colour stays free for its main action. Replace them with your own screenshots if you prefer.
Does the reading order match what I see?
Yes. In the document the text of every chapter comes before its drawing. On wide screens the drawing moves to the other side on alternate rows with grid placement alone, so tabbing and screen readers read the chapters in order; no order utility reorders anything.
How are the quotes marked up?
Each is a figure with a blockquote and a figcaption naming who said it, so assistive technology reads it as a quotation with its source. The accent line beside it is decoration.
What happens on a phone?
Each chapter stacks: its text first, then its drawing, with a rule from rail to rail between chapters. The drawings keep their size inside the column, and nothing scrolls sideways at 320 pixels. In a right-to-left layout the sides, the quote's accent and the divider all follow the direction, and the metrics keep their digits in order.