# Open Source

A repository card whose stars, forks and contributor count roll up digit by digit on view, with a sparkline that draws in, a language bar, contributor faces that slide in and fan open, and a live feed of commits, merges and releases.

- Page and source: https://uibrik.com/components/open-source
- Install: `npx shadcn@latest add https://uibrik.com/r/open-source.json`
- Packages (installed by the CLI): @tabler/icons-react, motion, react-use-measure
- Import: `import { OpenSource } from "@/components/uibrik/open-source/open-source"`

Where to use the Open Source React component:

- **Repo landing pages**: Stars, forks and contributors rolling up on view give a project's homepage real numbers.
- **GitHub stats on a site**: A language bar, sparkline and commit feed summarise a repo without leaving the page.
- **Developer social proof**: Contributor faces fanning open show a healthy community behind the tool. Pairs with [Avatar Stack](https://uibrik.com/components/avatar-stack).

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| repo | `string` | `"acme/ui"` | Repository as owner/name; the name is set in bold. |
| version | `string` | `"v2.4.0"` | Latest release tag. Empty hides it. |
| stars | `number` | `24817` | Star count. |
| forks | `number` | `1342` | Fork count. |
| contributorCount | `number` | `186` | Total contributors; the faces beyond the row are counted in a +N chip. |
| format | `"full" \| "compact"` | `"full"` | 24,817 or 24.8k. |
| maxAvatars | `number` | `8` | Most contributor faces in the row. |
| showLanguages | `boolean` | `true` | A bar of the repository's languages in their usual colours. |
| showActivity | `boolean` | `true` | Recent commits, merges and releases, stepping one entry at a time. |
| feedRows | `number` | `3` | Entries in view at once. |
| interval | `number` | `3` | Time between feed steps. |
| starLabel | `string` | `"Star on GitHub"` | Label of the star button. Empty hides it. |
| starColor | `string` | `"#f5b301"` | Colour of the star once starred, and of the sparkline. |
| href | `string` | `"#"` | Link for the repository name. |
| description | `string` | `""` | One line under the name. Empty hides it. |
| contributors | `{ name: string; src?: string }[]` | `12 people` | Faces in order. Initials stand in when there is no photo. |
| activity | `{ type: "commit" \| "merge" \| "release"; title: string; meta?: string }[]` | `8 entries` | Recent activity, newest first. meta is the short SHA, pull request number or tag on the right. |
| starHistory | `number[]` | `12 points` | Stars per period, oldest first, drawn as a sparkline under the counts. Empty hides it. |
| languages | `{ name: string; share: number; color: string }[]` | `TypeScript, CSS, MDX` | Languages and their share in percent, with GitHub's colours by default. |
| locale | `string` | `"en-US"` | Locale for number formatting. |
| starred / defaultStarred | `boolean` | `false` | Whether the viewer has starred, controlled or uncontrolled. Starring adds one to the count. |
| onStarredChange | `(starred: boolean) => void` |  | Called when the star button is pressed. Wire it to your own GitHub OAuth flow or open the repo. |
| className | `string` |  | Classes for the card. |