shadcn.io is not affiliated with official shadcn/ui
Sortable Side Projects Team Block for Ark UI
Eight side projects of a maker marketplace's team in a two-column hairline grid, each with stars, forks, a start month and stack chips, a sort by stars or newest and an accordion description.
Installation
Overview
A side-projects section for React with Ark UI, written for Wolsingham, a fictional marketplace for makers. A start-aligned header counts its own sentence from the list ("8 projects and 6,557 stars between them") and has a sort at its end: Most stars or Newest. Under it eight projects sit in a two-column grid of cells that share their hairlines and end the block. Each cell has the owner's initials, the project's name as an accordion trigger, its stars, forks and start month in tabular figures, a few stack chips and, when opened, a description with the owner's name and a link. One cell is open at a time. Sorting re-orders the same cells, so the grid keeps its height. One column on a phone, with the figures under the name. It is built from Accordion, Toggle Group, Avatar, Badge and Guides with your theme's tokens. The projects, numbers and people are made up for the example.
FAQ
How do I change the projects?
Edit PROJECTS at the top of the file: a name, an owner and their role, a sentence of description, stack chips, stars, forks and the month it started as an ISO year and month ("2026-03", fixed, never read from the clock). The header's total, the sort orders and the figures all come from this list. Keep the stack to two or three short chips so every cell has the same height when the grid re-sorts.
How does the sort work with a keyboard and a screen reader?
The two options are a group of toggles named "Sort by"; arrow keys move between them, and one is always chosen. Choosing re-orders the cells in place and a polite line says what came first ("Sorted by newest: Reedhurst first"). The order of the list in the page is the sorted order, so screen reader users meet the same sequence.
How does the description open?
Each project's name is the heading of an accordion item, so its button says whether it is open. One item is open at a time, and pressing the open one folds it. Choosing another sort keeps the open project open. With reduced motion the description opens without the height transition. Up and Down arrow keys move between the names; Home and End jump to the first and last.
Why doesn't the grid jump when I sort?
The cells are the same cells in a different order, and every closed cell is built to the same height: one line for the name, one for the figures and one for the chips. Rows therefore never change height when a sort puts different projects side by side. Opening a description does make its row taller, as an accordion should.