shadcn.io is not affiliated with official shadcn/ui
Roster Wall About Block for Vue
A roster wall for a team-chat company: twenty-four first-name cells in hairlines, the join year on hover, focus and tap, and a show-all control on a phone.
Installation
Overview
A roster wall for Vue with Ark UI, written for Huddlefield, a fictional team chat. A centred header sits over twenty-four people in hairline cells that run from rail to rail and end the block. Each cell is an initials Avatar, a first name and a function. Hover, keyboard focus or a tap swaps the function for "Since Year N" without moving the cell, and a tap keeps the year until the cell is pressed again. A phone shows the first twelve, in three columns, and a ghost Button labelled "Show all 24". From md the wall is six columns and every person is visible. The page's rails and top rule come from the Guides spine. It's built from Avatar, Button and Guides, with a CSS entrance and your theme's tokens for every colour. For an about page that should feel like a wall of names you can scan. The people are fictional and the years are example data, counted from the company rather than a calendar.
FAQ
How do I change the roster?
The people are PEOPLE: a first name, a last name (used for the initials and the button's name), a short role and a since such as 2 for "Since Year 2". The header count and the button label both use the length of the list. PHONE_COUNT is four rows of three, the number a phone shows before the button. Keep the list a multiple of six if you want every desktop row full.
How is it read by a screen reader?
The heading is the section's only h2. The wall is a list of buttons. Each button's name is the full name, the function and "since Year N", so the year does not depend on it being visible. The initials avatar is decorative, because the name is in the button. The lines are drawn by a layer hidden from assistive technology.
How does the year appear?
Hover and keyboard focus swap the function line for "Since Year N" in the same spot, so the cell does not grow. A tap presses the cell and the year stays; press it again, or press another cell, and the function comes back. The button's name always includes both, whether or not the year is on screen.
What does Show all do on a phone?
The first twelve people are visible. The rest stay in the page, hidden with CSS, until the button is pressed. The button is "Show all 24" both before and after, and aria-expanded tells the state. Pressing it again hides the extra rows. From md the button is gone and all twenty-four are shown. Nothing scrolls sideways at 320 pixels, and in a right-to-left layout the cells follow the reading direction.