shadcn.io is not affiliated with official shadcn/ui
Skill Filter Team Block for Svelte
Seven engineers of a build-cache company in hairline rows with their skills as chips, under six skill chips that float the people who know a skill to the top, fill the matching chips and count how many know it.
Installation
Overview
A skills directory for Svelte with Ark UI, for Spruceby, a build cache for monorepos. A compact header sits over a ruled band of six skill chips (Rust, Go, TypeScript, Kubernetes, Postgres and Bazel), each counting the people who know it, with a polite line that says what is shown. Under it seven engineers sit in hairline rows that run from rail to rail: an initials avatar, a name, a specific role and their skills as wrapped chips. Press a skill and the people who know it float to the top, in their usual order, with the matching chips filled in; everyone else stays below, dimmed, so the list keeps its height. Press the chip again and everyone goes back. On a phone the chips scroll sideways and each row's skills wrap under the role. It's built from Toggle Group, Badge, Avatar and Guides, with CSS transitions and your theme's tokens for every colour. The people are fictional example data. For agency and studio pages, "who could staff this" lists and any team page where the question is "who knows X".
FAQ
How do I change the people and the skills?
Edit PEOPLE and SKILLS at the top of the file. A person is a name, a role and a skills list. A skill is filterable when it is in SKILLS; any other skill on a person (like "Linux kernels") shows as a plain chip. The counts on the chips and the line above the list are counted from the same data, so adding someone needs no other change. Keep at least two people per filterable skill, or the line reads "1 person knows" for a skill that is hardly a team strength.
How does the filter work with a keyboard and a screen reader?
It's a group named Skills. Tab moves into it, the arrow keys move between the chips, and Space or Enter presses one; pressing the pressed chip again clears it. Each chip is read with its count ("Rust, 3 people"), a polite line says the result ("3 people know Rust") without moving focus, and a matching chip in a row is read with "(matches)". The matching people also come first in the list itself, so a screen reader meets them first.
Why do people move to the top instead of the others being hidden?
Hiding leaves a list with holes and a block that shrinks, which moves everything below it. Here the people who know the skill move to the front in their usual order, and everyone else follows, dimmed in place: a light tint on the row, an outline avatar and a muted name, all at AA contrast in light and dark themes. The list always has the same height. Tools that watch for layout shifts report the re-sort as one; it is the feature.
How does it fit on a phone?
The chips scroll sideways from rail to rail, with the next chip peeking in, and the polite line sits under them. Each row stacks: the avatar, name and role first, then the skills wrapped under the role, in a few short lines. All seven people are shown, since a pick should never hide behind a button.
Can I use photos instead of initials?
Yes: put an AvatarImage in each Avatar, before the fallback. The avatar is decorative (the name is in the heading beside it), so the picture needs no alternative text. A filled initials avatar marks the matches while a skill is picked; with photos you may want a ring on the matching rows instead.