# ContributorWall

> A project's contributors as a dense mosaic of square tiles, each a link to one person, ending on a tile that counts everyone the wall leaves out.

```ts
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`.

## Examples

```tsx
<ContributorWall aria-label="Contributors">
	<ContributorWall.Person href="https://github.com/ana" name="Ana Souza" />
	<ContributorWall.More href="https://github.com/org/repo/graphs/contributors" count="+190" aria-label="All 214 contributors" />
</ContributorWall>
```

## Props

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

Also accepts everything in `TagProps<"ul">`.


### ContributorWall.Person

One contributor: a linked tile with their picture or their initials, named by `name`.

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

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


### ContributorWall.More

The 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.

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

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