All Contributors
Display all contributors of your project in a card grid following the All Contributors specification.
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4 "github-actions[bot]")
![trueberryless-org[bot]](https://avatars.githubusercontent.com/in/1100768?s=60&v=4 "trueberryless-org[bot]")
![renovate[bot]](https://avatars.githubusercontent.com/in/2740?s=60&v=4 "renovate[bot]")
![autofix-ci[bot]](https://avatars.githubusercontent.com/in/243519?s=60&v=4 "autofix-ci[bot]")
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4 "coderabbitai[bot]")
Requirements
Section titled “Requirements”For this component to render successfully, you must have a valid .all-contributorsrc file located in your project root (or any parent directory relative to where Astro is running).
The component automatically crawls up the directory tree to locate this file, so it works seamlessly even in monorepos. If the file is missing or contains no contributors, it will render a fallback message.
Import
Section titled “Import”import { AllContributors } from "astro-contributors";Render a card grid with all contributors loaded from the .all-contributorsrc file in your project directory using the <AllContributors> component. No parameters are required.
import { AllContributors } from "astro-contributors"
<AllContributors />{% allcontributors /%}<AllContributors> Props
Section titled “<AllContributors> Props”The component outputs a CSS Grid that automatically adjusts the number of columns based on the screen width (minimum 140px per card). Out of the box, it automatically inherits your Starlight theme variables. You can override these using the optional props below.
All color props accept any valid CSS color value (Hex, RGB, HSL, etc.).
bgColor
Section titled “bgColor”Type: string
Optional
Overrides the background color of the individual contributor cards.
borderColor
Section titled “borderColor”Type: string
Optional
Overrides the border color of the contributor cards, the avatar background, and the badge borders.
textColor
Section titled “textColor”Type: string
Optional
Overrides the primary text color used for the contributor’s name.
badgeBgColor
Section titled “badgeBgColor”Type: string
Optional
Overrides the background color of the contribution type badges.
badgeTextColor
Section titled “badgeTextColor”Type: string
Optional
Overrides the text and emoji color inside the contribution type badges.
focusColor
Section titled “focusColor”Type: string
Optional
Overrides the accent color used for the hover state outline and focus rings.
formatLink
Section titled “formatLink”Type: (username: string) => string
Optional
Overrides the default profile link behavior. Receives the contributor’s GitHub username and returns a custom URL string.
Examples
Section titled “Examples”Custom Colors
Section titled “Custom Colors”import { AllContributors } from "astro-contributors"
<AllContributors bgColor="#1e1e1e" borderColor="#333333" textColor="#ffffff" badgeBgColor="#ff5733" badgeTextColor="#111111" focusColor="#ff5733"/>Custom Links
Section titled “Custom Links”import { AllContributors } from "astro-contributors"
<AllContributors formatLink={(username) => `https://github.com/your-org/your-repo/commits?author=${username}`}/>