Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Tab Swap Split Showcase Features Block for Radix UI

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.

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 Radix UI, where one tab switch changes a whole band. A compact header sits over a band of three line tabs (Plan, Ship and Review) for Railyard, a release tool for mobile teams. Choosing a tab swaps the split under it: on the end side a title, a sentence, three ticks and a link; on the start side a drawing that runs flush to the page's start rail and fades out at its foot, a two-week release calendar with its freeze window, a staged rollout ladder or a checklist of gates with sign-off chips. A hairline divider meets the tab band's rule with a plus mark. It's tabs, a badge and the Guides line kit, with your theme's tokens for every colour and no button. For release, onboarding and any product with a few flagship stages that deserve a full band each.

FAQ

How do I change the tabs and what they show?

Edit the PLAN, SHIP and REVIEW objects at the top of the file for each tab's title, sentence and ticks, and the data beside them (TRAINS, RUNGS and GATES) for what the drawings draw. Each drawing is a small component (PlanDrawing, ShipDrawing and ReviewDrawing), and each tab is a TabsTrigger and a TabsContent with the same value, so a fourth stage needs one of each.

How do the tabs work with a keyboard?

They are real tabs, a list named Release stage with a panel for each. Tab moves into the list, the arrow keys move between Plan, Ship and Review and open each one's band as they go, and Tab again moves into the open panel. Home and End jump to the first and last tab.

Does the page jump when I switch tabs?

On a desktop it doesn't: the band has one fixed height, so a longer drawing can't push what follows. On a phone the copy comes first and the drawing sits under it at one height, so the band changes only by the difference between two short paragraphs.

Are the drawings real?

They are drawings, built from the page's own tokens in greyscale and hidden from assistive technology, so everything they say is also in the copy beside them. The calendar's bars, the ladder's rungs and the gate count are all drawn from the data at the top of the file, so they always agree with each other.

What moves, and what happens with reduced motion?

The header and the tabs fade up once when the page loads, the selected tab's line slides to its new place, and the band fades in when you swap. With reduced motion the fade-up and the fade-in are off and the line jumps.

Does it work right to left?

Yes. The drawing moves to the other side with the copy, the divider and the tab line follow the reading direction, the link's arrow mirrors, and values such as percentages stay intact.

All 170 features blocks