shadcn.io is not affiliated with official shadcn/ui
Values Examples Team Block for Svelte
Four company values as vertical tabs in a split; each page says what the value means and lists three real examples of someone doing it, with the year of the company, revealing one after another.
Installation
Overview
A values section for Svelte with Ark UI, for Nockley, a ticketing platform. The first column holds a title and a vertical tab rail of four values ("Queue like a fan", "Ship it small", "Own the bad night", "Write down the why"), each with the number of examples; a hairline divider, meeting the top rule with a + mark, separates it from the page of the chosen value. The page says in one sentence what the value asks of people, then lists three examples as an ordered list: who did it, what they did and when, in the company's years ("Year 3"), never a calendar year. Each time a page comes into view its examples reveal one after another; with reduced motion they are simply there. Every page shares the height of the tallest, so switching moves nothing. On a phone the rail becomes a row of chips that scrolls sideways above the page. It's built from Tabs, Avatar and Guides, with CSS transitions and your theme's tokens for every colour. The people and what they did are made up for the example.
FAQ
How do I change the values and the examples?
Edit VALUES at the top of the file. A value is an id, a short label, a means sentence and a list of examples, each a name, a role, a did sentence and a when such as "Year 3". The counts in the rail and the "12 things" in the header are counted from that list.
What exactly moves, and can I turn it off?
Only the examples: each one fades up, the second a moment after the first and the third after that, whenever its page comes into view (on load and each time you pick another value). It is a CSS transition on opacity and position, not a script. With reduced motion the transition is switched off and the examples show at once. To remove the effect, delete the REVEAL classes from the list items.
How does the keyboard work?
It is a vertical tab list: Tab moves into it and the Up and Down arrow keys move between values. On a phone the rail is drawn as a row of chips but is still a vertical list, so Up and Down move between chips there too. Left and Right do nothing in a vertical list. The page is reachable with Tab after the rail.
Does the block change height when I switch?
No. Each page is laid out invisibly, all four in the same cell, behind the visible one, so the block is always as tall as the longest page at the current width, on every screen size. The invisible copies are hidden from assistive technology and from the keyboard.
Why do the examples say Year 3 and not a date?
A calendar year goes stale; "Year 3" is the third year of the company and stays true. Use whatever your team says out loud. Keep it text, not a time element, since there is no date to machine-read.
What changes on a phone?
The rail becomes a row of chips that scrolls sideways above the page, each showing just the value's name (the count of examples is dropped). The page is one column under it, and a rule with + marks takes the divider's place. Nothing but the chips scrolls sideways at 320 pixels.