Contributor List

Display all GitHub code contributors of a repository.

Preview

• 
• 
• 
• 
• 
• 
• 

Note

If your repository is private or you are hitting rate limits, set the PUBLIC_GITHUB_TOKEN environment variable to a GitHub personal access token in the environment that runs your Astro build, e.g. your hosting provider’s environment variables. If you build in GitHub Actions, store the token as a secret and pass it to the build step with env: PUBLIC_GITHUB_TOKEN: ${{ secrets.PUBLIC_GITHUB_TOKEN }}. If the repository is public, you can skip this step.

Import

import { ContributorList } from "astro-contributors";

Usage

Display the code contributors of a GitHub repository using the <ContributorList> component and provide a githubRepo.

MDX

import { ContributorList } from "astro-contributors";

<ContributorList githubRepo="trueberryless-org/astro-contributors" />

Markdoc

{% contributorlist githubRepo="trueberryless-org/astro-contributors" /%}

Preview

• 
• 
• 
• 
• 
• 
• 

<ContributorList> Props

The <ContributorList> component accepts the following props:

githubRepo

Type: ${string}/${string}
Default: "withastro/docs"

Define the GitHub repository to fetch contributors from in the format owner/repo.

ignore

Type: string[]
Optional

An array of GitHub usernames to ignore when fetching contributors. This feature is very useful if you have a bot account that you don’t want to display.

import { ContributorList } from "astro-contributors"

<ContributorList githubRepo="trueberryless-org/astro-contributors" ignore={["autofix-ci[bot]", "github-actions[bot]", "renovate[bot]"]} />

Preview

• 
• 
• 
• 

focusColor

Type: string
Optional

The accent color used for the avatar background and focus outlines. This can be any valid CSS color value (Hex, RGB, HSL, etc.).

If not provided, the component will first check for a global CSS variable named --avatar-focus-color, then fall back to Starlight’s --sl-color-accent, and finally default to a standard blue.

import { ContributorList } from "astro-contributors"

<ContributorList
  githubRepo="trueberryless-org/astro-contributors"
  focusColor="#ff5733"
/>

Preview

• 
• 
• 
• 
• 
• 
• 

You can notice the focus color, when you use keyboard navigation.

formatLink

Type: (username: string) => string
Optional

By default, clicking on an avatar links to the contributor’s GitHub profile. You can override this behavior by passing a function to formatLink. This function receives the contributor’s GitHub username and should return the desired custom URL as a string.

For example, you can use this to link directly to their commit history in the repository instead of their profile page.

import { ContributorList } from "astro-contributors"

<ContributorList
  githubRepo="trueberryless-org/astro-contributors"
  formatLink={(username) => `https://github.com/trueberryless-org/astro-contributors/commits?author=${username}`}
/>

Preview

• 
• 
• 
• 
• 
• 
•