shadcn.io is not affiliated with official shadcn/ui
Team Contributions Changelog Block for Svelte
Four team cells, Frontend, Backend, Platform and DevOps, in a two-by-two grid of overshooting hairlines, each with its people, its change count and its changes, ordered by most changes or by name.
Installation
Overview
A team contributions changelog for Svelte with Ark UI, written for Crewlog, a fictional team reporting tool. Four team cells, Frontend, Backend, Platform and DevOps, sit in a two-by-two grid from the small breakpoint, each cell a ring of hairlines that overshoot its corners. A cell gives the team's name, how many changes it shipped, its people as three initials with a "+N" for the rest, and its changes as a list, each with an icon and a hidden word (New, Improved or Fixed). A Segment Group under the header orders the teams by most changes or by name, and a polite status line says which. Both orders sit unseen under the live one, so the block's height never changes. It's built from Avatar, Segment Group and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. On a phone the cells stack. For team reporting, release credits and engineering updates. The product, people and changes are example data, and every count is computed from the typed teams.
FAQ
How do I change the teams and their changes?
Edit TEAMS at the top of the file: a team has an id, a name, its members (two-letter initials) and its changes, each with a kind and a title. The header's total, each cell's count, the "+N" beside the initials and both orderings are computed from that list.
What does the ordering switch do?
It reorders the four cells, in the page itself and not just visually: "Most changes" puts the busiest team first, with ties broken by name, and "Name" sorts alphabetically. The reading order, the tab order and the grid always agree. A polite status line says which ordering is on.
How does the switch work with a keyboard?
It is a Segment Group: Tab moves to it, the arrow keys move between the two choices and choose the one you reach. In a right-to-left layout the arrows follow the reading direction.
How are the people shown, and read?
Each team draws up to three initials in a stack with a "+N" for the rest, and writes the headcount beside it ("5 people"); the stack itself is hidden from assistive technology so the count is read once. No photos are used.