ContributorWall

A project's contributors as a dense mosaic of square tiles.

View code

tsx

<ContributorWall aria-label="Contributors">
	{people.map((person) => (
		<ContributorWall.Person href={person.url} name={person.name} />
	))}
	<ContributorWall.More href={contributorsUrl} count="+179" aria-label="All 214 contributors" />
</ContributorWall>

Demo landings

Whole pages built only from @sdxc/ui, each for an invented product with its own palette and type. They open in a new tab.

MarginAn invented AI note-taker for recorded meetings: summaries, decisions and to-dos that each link to the transcript line they came from./demo/ai
RooftreeRooftree keeps a household's groceries, chores, calendar and meals on one encrypted list that syncs across iPhone, Android, Mac and Windows./demo/app
Hollyhock BakeryHollyhock Bakery on Alder Street: today's bake, the menu and prices, opening hours that know the time, pickup orders, directions, step-free access and parking./demo/bakery
The MeasureA book and video course on web typography for designers and engineers: measure, rhythm, scale and fonts, with CSS for every chapter./demo/book
Overprint 2027Overprint is one day of talks on what browsers ship, in two rooms of an old foundry in Rotterdam, on Thursday 15 April 2027./demo/conference
CenteredCentered is a video course in wheel-throwing pottery: 24 lessons in six modules with chapters and transcripts, self-paced or with a cohort, ending in a lidded jar./demo/course
Strata TwoStrata Two is a 75% keyboard in a one-piece aluminium case with a gasket-mounted plate. Preorder batch 03 for $279, shipping 9 March 2027./demo/hardware
plumbPlumb compiles a TypeScript schema to straight-line JavaScript once, so parsing runs the checks you would have written by hand./demo/library
UndercurrentA fortnightly letter and podcast about the water mains, power lines, signals and post under an ordinary day, read aloud with the people who run them./demo/newsletter
KeelKeel meters every event your product emits, prices it on any plan and sends the invoice on the first of the month./demo/saas
QuoinQuoin designs and builds everyday software for transit, libraries and makers, and measures what it changed. Booking from March./demo/studio

Every demo, landings and docs sites alike, is listed in the demo gallery.

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

Terminal

npm add @sdxc/ui remix

typescript

import "@sdxc/ui/theme.css";

Usage

typescript

import { ContributorWall } from "@sdxc/ui/landing";

Renders the mosaic. Every tile is square and the grid's columns step with its own width, so the wall keeps its texture from a phone column to a wide split. Server markup and CSS alone; tiles round to --ui-landing-card-radius-inner and outline in --ui-landing-hairline.

Composition

The parts the component publishes, each a static property of the host.

ContributorWall
ContributorWall.PersonOne contributor: a linked tile with their picture or their initials, named by name.
ContributorWall.MoreThe closing tile: the count of contributors the wall leaves out, linking to all of them, drawn as a hairline outline so it reads as a way out of the mosaic.

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Prop	Type	Required	Description
`"aria-label"`	`string`	Yes	Accessible name for the list, such as "Contributors to plumb".
`columns`	`Columns`	No	Columns at each container step. A tile count that divides every step, the ContributorWall.More tile included, fills every row.
`children`	`RemixNode`	Yes	ContributorWall.Person tiles, then an optional ContributorWall.More.

Also accepts everything in TagProps<"ul">.

ContributorWall.Person

Prop	Type	Required	Description
`href`	`string`	Yes	Their profile or commit history.
`name`	`string`	Yes	Their name, read by assistive technology and shown as a tooltip.
`src`	`string`	No	Their picture; the tile shows their initials when omitted.

Also accepts everything in Omit<TagProps<"a">, "children" | "href" | "role">.

ContributorWall.More

Prop	Type	Required	Description
`href`	`string`	Yes	The full contributor list.
`count`	`RemixNode`	Yes	The short count the tile shows, such as "+190".
`"aria-label"`	`string`	Yes	What the link opens, read in full by assistive technology.

Also accepts everything in Omit<TagProps<"a">, "children" | "href" | "role">.