shadcn.io is not affiliated with official shadcn/ui
Avatar Stacks Sidebar Block for Svelte
A project hub in a fixed-height window whose sidebar shows each project with a stack of member avatars and a plus count, where Join and Leave add or remove you and the stack follows.
Installation
Overview
Show who is on each project at a glance with this avatar stacks sidebar for Svelte with Ark UI. A window framed by a hairline with a plus mark on each corner holds the Sidebar for Peoplefold, a project hub. Five projects each end in an Avatar group of up to three member initials and a plus count for the rest, above a People group of initials with their roles. Choosing a project lists its members on the page, and Join in the top bar adds you: You leads the stack, the count rises and the status line says so; Leave takes you out again. Choosing a person lists the projects they are on. It's built from Sidebar, Avatar, Button and Guides, with a CSS entrance only. For project lists, team spaces and any rail where who is involved matters.
FAQ
How does the stack decide what to show?
It shows the first three people on the project, with you first once you have joined, and a plus count for everyone else ("+2"). The stack is hidden from screen readers because the link's name already says the count ("Mobile app refresh, 5 members") and whether you are on it. Initials never shrink below a readable size, so the stack stays at three.
What do Join and Leave change?
Only your own membership, in the block's state. Joining puts you at the front of the project's member list and stack and raises every count by one, in the rail, on the page and in the status line. Leaving reverses it. Brand guidelines starts with you on it, so you can see Leave first.
What does choosing a person do?
The page switches from a project's members to that person's projects, each with its summary and member count, and Join leaves the top bar because it belongs to a project. The person's role is under the heading.
What stays in the page, and how do I connect it?
Everything. People, projects and memberships are typed at the top of the file, and nobody is notified. In your app, call your API in the Join and Leave handler and refresh the stack from the result. The rows are links to # whose handler shows the project or person instead of navigating. Point them at your routes and mark the current one with isActive.
What happens when the sidebar collapses?
The rail folds to one icon per project and one avatar per person, and the stacks are hidden, with a tooltip showing each project and its member count. The provider is set with persist={false} and shortcut={false}, so the block writes no cookie and leaves Ctrl and Command with B to the page.
How does it work on a phone?
Below the medium breakpoint the sidebar becomes a sheet that the menu button in the top bar opens from the start edge, the right in a right-to-left layout. Join and Leave stay in the top bar and the page lists the members, so both are on the first screen. The window keeps its height, and the status line at its foot says what changed.