shadcn.io is not affiliated with official shadcn/ui
Phase Tabs Approach Block for React Aria
A process section for a product studio: four numbered phase tabs, and under the open one a split panel with what the studio does, what the client gets and who is in the room.
Installation
Overview
An approach section for React with React Aria, written for Plankwell, a fictional product studio. A short header sits over a line band of four numbered tabs, Discover, Shape, Build and Launch, ruled from rail to rail. The open phase fills a split panel: at the start, what the studio does, as a sentence, the activities in a list and how long the phase takes; behind a divider at the end, what the client gets, as a definition list of deliverables, with the people in the room as badges. Every panel is sized by an unseen copy of the others, so picking a phase never moves the page, and on a phone the tabs scroll sideways while the panel stacks into two parts. It's built from Tabs, Badge and Guides, with a CSS entrance and your theme's tokens for every colour. For agency and consultancy about pages, and any company that has to say what working with it looks like. The durations are example data.
FAQ
How do I change the phases and what each one holds?
The phases are PHASES at the top of the file. Each has a name, a summary, a list of activities, deliverables with a label and a detail, the people in the room as team and a duration written in relative time. Add or remove phases freely: the tabs, the numbers and the unseen sizing copy are all drawn from the array. The header's "Four phases, thirteen weeks" is plain text; update it when the durations change.
Why doesn't the page jump when I switch phase?
Behind the open panel the block keeps an unseen copy of every phase's panel in the same grid cell, hidden from sight, from assistive technology and from the keyboard. The cell is as tall as the tallest copy, so a short phase leaves empty space at its foot instead of pulling the next block up. If you add a phase with a very long list, the whole block grows to fit it.
How does it work with a keyboard and a screen reader?
The tabs follow the tabs pattern: Tab moves into the list, arrow keys move between phases, Home and End jump to the ends, and the panel is its own region named by its tab. Inside the panel, the headings "What we do", "What you get" and "In the room" are real h3s, the activities a list and the deliverables a description list, so each reads as what it is. The numbers on the tabs are decorative and skipped by screen readers.
What happens on a phone?
The four tabs keep their size and scroll sideways inside the band, with the first one visible. The panel stacks: what we do first, then a rule from rail to rail, then what you get. Nothing scrolls sideways at 320 pixels except the tab list itself, and in a right-to-left layout the tabs, the divider and the dashes before the activities all flip to the other side.