Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

About blocks

Pro

Phase Tabs Approach Block for React

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.

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

An approach section for React with Base UI, 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.

Is it the same on all seven targets?

Yes. The tabs are Base UI's own on every target, so the keys and the roles come from the library you picked. The markup, the lines and the copy are identical everywhere; only the way a tab names its panel differs, and that stays inside the Tabs component.

What moves, and what happens with reduced motion?

The header and the tabs fade up once on load, and the tab line slides to the chosen tab. Under reduced motion the entrance is skipped and the panel simply swaps. There is no autoplay and nothing loops.

  • Pro

    Duration Table Methodology

    Principles and process

    A methodology section for an engineering consultancy: a to-scale bar of five phases across six weeks, over a framed table with each phase's work, tools as badges and duration.

  • Pro

    Flow Diagram Workflow

    Principles and process

    A workflow section for a content operations tool: six steps drawn as a flow with an icon node each, arrows between them and a loop from Review back to Draft, with each step's sub-steps in a hover card.

  • Pro

    Vertical Steps Journey

    Principles and process

    A customer journey section for a CRM: the first 90 days as a vertical stepper with the catalog Steps, each stage with its timing, its hands-on time and its key action, and a line that says which stage you are in.

  • Pro

    Situation Tabs Operating Principles

    Principles and process

    An operating-principles section for an accounting-automation company: line tabs by situation, and under them the open situation's three rules as hairline rows, each with the question we ask.

  • Pro

    Day Track Hiring Process

    Careers

    A hiring process section for an applicant tracking company's own about page: five stages drawn to scale over fourteen days, five cells saying what to expect at each, and a promise to reply within two days.

  • Pro

    Tab Swap Split Showcase Features

    Tabs and accordions

    A features section for a release tool: a line tab switch (Plan, Ship, Review) that swaps one split band, with a drawing flush to the start rail and the copy on the end side.

All 150 about blocks