shadcn.io is not affiliated with official shadcn/ui
Situation Tabs Operating Principles Block for React
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.
Installation
Overview
An operating-principles section for React with Base UI. A compact header sits over a band of line tabs ruled from rail to rail, one tab per situation: when we disagree, when we are late, when we are wrong, when a customer is upset. Under the band, the open situation's three rules are hairline rows: the rule at the start, and at the end a sentence on what it means and the question we ask to keep to it. Every panel is sized by an unseen copy of the others, so changing situation never moves the page; the block ends on its last row. It's built from Guides and Tabs, with CSS transitions for the entrance and your theme's tokens for every colour. For a handbook, a careers page or an about page that says how a team behaves when it is tested, not what it values. The company and its rules are invented for the example.
FAQ
How do I add a situation or a rule?
Edit SITUATIONS at the top of the file: each situation has an id, a tab label and a list of rules, and each rule a title, a detail and the question we ask. A new situation becomes a new tab with no other change. Keep the rule counts alike so the rows read as a set, though the block keeps the tallest panel's height whatever you do.
Why doesn't the page move when I change tab?
The panels differ in height, and a tab that swaps them would pull everything below it up and down. So an unseen, inert copy of every situation's rules sits in the same grid cell as the open panel, and the cell keeps the tallest. The copies are hidden from assistive technology and from Tab.
How do the tabs work with a keyboard?
The arrow keys move along the tabs, Home and End jump to the first and last, and Tab moves on into the open panel, which has a visible focus ring. Each rule is a term and its descriptions in one definition list, so a screen reader hears the rule, then what it means, then the question.
How does it fit on a phone?
The tabs scroll sideways inside their band, with the selected one underlined, and each row stacks: the rule, then its sentence, then the question. Nothing else scrolls sideways at 320 pixels.
Related
- Pro
Principles Rail About
Principles and processA split about section for a release-management tool: a sticky title at the start, and six principles as stations on a hairline rail, each opening to what it means and how it shows up.
- Pro
Vertical Tabs Lessons Learned
TimelinesA lessons-learned section for a retrospectives tool: a vertical tab list of six post-mortems with the year each happened, and the open one as what happened, what we learned and what changed.
- Pro
Weighted Decision Matrix About
ComparisonsA vendor decision matrix for an evaluation firm: options by weighted criteria, a computed score on each row, and a column that rings when its criterion is hovered or focused.
- Pro
Settings Panel Work Style
Culture and valuesA working-agreements section drawn as a settings panel: six agreements as rows with a drawn switch, the state in words and a line on why, in a tinted frame beside the title.
- Pro
Commitments Ledger About
Principles and processA ledger of a nonprofit CRM's public promises: an ordered list of rows with the promise, how far along it is as a word and a progress bar, who owns it and when it was last checked, and a tally counted from the rows.
- Pro
Before After Toggle Feedback Culture
Culture and valuesA feedback culture section for a peer review tool: five habits of a good review comment, each with the vague sentence most people write and the useful rewrite, flipped by a Before / After toggle.