Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

About blocks

Pro

Discipline Tabs Craft About Block for React Aria

Tabs for four disciplines of a design-to-code tool: each panel lists three principles with a before and after sample and the figure that changed.

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

Discipline tabs for React with React Aria, written for Craftlane, a fictional design-to-code tool. A start-aligned header sits over a band of four line tabs (Engineering, Design, Writing, Support). Each panel is a list of three principles ruled from rail to rail: the principle, one sentence and the figure it changed at the start, and at the end a "Before" and an "After" sample, in monospace when the sample is code and in plain type when it is copy. Every panel's rows are stacked, unseen, under the open one, so choosing a discipline never moves the page. On a phone the tab list scrolls sideways and the two samples stack. It's built from Tabs and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For product and engineering teams that want to show how each discipline works, with proof. The figures and samples are example data.

FAQ

How do I change the disciplines and principles?

Edit DISCIPLINES at the top of the file: each has a label and its principles, and each principle a title, a sentence, a before and an after sample, a result (the figure, with its sign) and the measure it counts. Set mono to true when the samples are code. Add a discipline and it gets its own tab; the unseen stack that holds the height includes it automatically.

How do the tabs work for a keyboard or a screen reader?

Tab moves to the tab list; the arrow keys move between the disciplines (Home and End go to the first and last), and the panel follows. Each principle is an h3 and each sample pair is a description list reading "Before" then its text, "After" then its text, so a screen reader hears them in the right order.

Why is the page the same height in every tab?

All four panels are rendered in the same grid cell, and the unseen copies make the cell as tall as the tallest panel. Switching tabs then swaps what is visible and shifts nothing below.

How are the figures written for a right-to-left reader?

A figure such as "−62%" is wrapped in a bdi with dir="ltr" and uses a true minus sign, so the sign stays beside the number in a right-to-left layout. The "Before" and "After" marks are a cross and a tick next to the word, not a colour.

How does it fit on a phone?

The tab list scrolls sideways when four labels do not fit, and the active tab keeps its underline. In each row the figure and its text come first and the two samples stack below them, "Before" over "After". Nothing else scrolls sideways at 320 pixels.

What moves, and what happens with reduced motion?

The header and the tabs fade up once on load, and a panel's rows appear at once when you choose a tab. With reduced motion the entrance is off.

All 150 about blocks