shadcn.io is not affiliated with official shadcn/ui
Benefits About Block for Svelte
A payroll company's own benefits, switched by office: four columns for Health, Money, Time and Growth, with the wording swapping in place and a row of figures underneath.
Installation
Overview
A benefits block for Svelte with Ark UI, written for Paywise, a fictional payroll company, describing what it offers its own team rather than what it sells. A compact header carries a switch for three offices: United States, United Kingdom and European Union. Under it, four columns (Health, Money, Time and Growth) each hold three rows. Changing office swaps the wording of every row in place: the other offices' sentences stay in the same cell, unseen, so the columns do not grow or shrink and the page does not jump. From the wide layout the columns are cells whose lines overshoot their corners; below that, each column is a band ruled from rail to rail. A row of three figures (people on the offer, employer cost for a year, days of leave) closes the block, and those figures swap with the office too. A polite line announces the office you are showing. The page's rails and top rule come from the Guides spine. It's built from Toggle Group and Guides, with a CSS entrance and your theme's tokens for every colour. The switch is the only control, and it is not the page's primary colour. For an about or careers page whose offer really does change by country. The amounts are example data.
FAQ
How do I change a benefit or add an office?
The offices are REGIONS, each an id and a label. The columns are CATEGORIES: a title and rows, and each row is a label plus text for every office. The closing figures are STATS, in the same shape. The helper wording takes the three offices in the order United States, United Kingdom, European Union. Adding an office means adding it to REGIONS, to the Region union and to every wording call. The switch, the swapped sentences and the figures all read from those lists.
Why doesn't the page jump when I change office?
Every office's sentence is stacked in one grid cell. The offices you are not showing are invisible and hidden from assistive technology, but they still hold their height, so the cell is as tall as its longest sentence. The closing figures work the same way. Switching office changes which sentence is visible. It does not add or remove rows.
How is it read by a screen reader?
The heading is an h2. The switch is a group labelled "Office", and the chosen office is pressed. A polite live region says "Showing the United States offer" (or whichever office is on) when it changes. Each column is an h3 over a description list, so a row reads "Cover" and then its sentence. The closing figures are another description list: the label, then the value. The lines are hidden from assistive technology.
How does the switch work with a keyboard?
Tab reaches the group. Arrow keys move between the three offices, and the one you land on is selected. You cannot turn the group off: one office is always showing. The pressed office is drawn in the foreground, so it stays clear in every theme.
How does it fit on a phone?
The switch wraps under the heading. The four columns stack as bands, each with a rule from rail to rail, and the three figures sit under a last rule. Nothing scrolls sideways at 320 pixels. Amounts stay in their own direction, so a currency sign does not jump to the other end of the line in a right-to-left layout.