shadcn.io is not affiliated with official shadcn/ui
Situation Tabs Operating Principles Block for Vue
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 Vue with Ark 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.