AllContributors
The AllContributors component automatically finds and parses the .all-contributorsrc file in your project directory and renders a responsive, accessible grid of contributor cards.
Unlike the ContributorList component, AllContributors requires no parameters. It acts as a plug-and-play solution that inherits all configuration directly from your existing All Contributors setup.
Simply import the component and place it in your MDX file.
import { AllContributors } from "astro-contributors"
<AllContributors />
![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.
Styling
Section titled “Styling”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, the component automatically inherits your Starlight theme variables for a native look and feel. However, you can override any of these colors using optional props. This is especially useful if you are using the component in a vanilla Astro project or want a completely custom look.
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.
Example with Custom Colors
Section titled “Example with Custom Colors”import { AllContributors } from "astro-contributors"
<AllContributors bgColor="#1e1e1e" borderColor="#333333" textColor="#ffffff" badgeBgColor="#ff5733" badgeTextColor="#111111" focusColor="#ff5733"/>