Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

About blocks

Pro

Career Path Spotlights About Block for Svelte

An employee spotlight for a film-crew planning company, with four people in a vertical tab list and the open profile as a three-step career path, three answers, and a tenure badge.

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

A career-path spotlight for Svelte with Ark UI, written for Cuesheet, a fictional production planner for film crews. A compact header sits over a master and detail: at the start a vertical list of four names, each with the role in its margin; behind a divider, the open profile with initials, a tenure badge, a short fact, a three-node path (joined as, then, now) and three answers. An unseen copy of every profile holds the panel at the tallest, so choosing a person never moves the page. On a phone the names become a row of chips that scrolls. It's built from Tabs, Avatar, Badge and Guides, with CSS for the entrance and your theme's tokens for every colour. For an about page that introduces a few people through the jobs they grew into. The people, the paths and the answers are example data.

FAQ

How do I change the people?

Edit PEOPLE at the top of the file. Each person has a name, a role, a tenure in years, a fact, the three path labels joined, later and now, and three answers (a normal Tuesday, what the job turned out to be, and advice). The initials and the "Here N years" badge are derived. A new person becomes a new row and a new panel.

How do the tabs work with a keyboard?

The list stays a vertical tab list, including on a phone where it looks like a row of chips, so Up and Down move between the names, Home and End jump to the first and last, and Tab moves into the open profile. The open row is the selected tab, marked by a bar on a large screen and a filled chip on a phone.

Why doesn't the page move when I pick a person?

The profiles differ in length. An unseen, inert copy of every profile sits in the same grid cell as the open one, so the cell keeps the height of the tallest. Those copies are out of the accessibility tree and the tab order.

Is another person's profile in the page?

The open profile is the one mounted in the tab panel. The other profiles are not mounted there. The inert copies used to hold the height stay in the HTML, hidden from assistive technology, and are not a second set of profiles to read.

How does it fit on a phone?

The names become one scrolling row of chips, and the role leaves the chip and stays under the name in the profile. The path stays three nodes across. Nothing else scrolls sideways at 320 pixels.

What moves, and what happens with reduced motion?

The header and the tab region fade up once when the page loads, and the profile fades in when you choose another person. With reduced motion the entrances are off and the profile swaps at once.

All 150 about blocks