Generate a variety of dynamic and aesthetically appealing GitHub stat cards, perfect for integrating into GitHub READMEs and beyond. 📊📈
Enhance your GitHub profile and repository READMEs with customizable 'GitHub Repo Cards'. Display information about your repositories in a neat, visual card format that can be tailored to your liking.
🔍 Example of the default 'GitHub Repo Card':
🔍 Example of the
'showUsername'parameter key with the value'true':
🔍 Example of the
'theme'parameter key with the value'dark':
ⓘ Click here for a complete list of available themes.
🔍 Example of the
'theme'parameter key with the value'straightBlack':
ⓘ Click here for a complete list of available themes.
🔍 Example of the
'showLicense'parameter key with the value'false':
Follow these steps to use the 'GitHub Repo Card' in your README file or any other place:
- Embed the URL as an image:
- Replace
'USERNAME'with your GitHub username and'REPOSITORY'with the name of your repository.
🔍 Example:
You can customize the 'GitHub Repo Card' by providing query parameters in the URL.
Query parameters are added after the main URL using the '?' character, followed by a series of key=value pairs, separated by '&'.
🔍 Example:
https://my-github-cards.vercel.app/api/github-repo-card?user=robert-warneke&repo=github-cardsIn this example:
https://my-github-cards.vercel.app/api/github-repo-cardis the main URL.'user'is a parameter key and'robert-warneke'is its value.'repo'is another parameter key and'github-cards'is its value.
| Query Parameters | Description |
|---|---|
user |
The username of the GitHub account. Default is 'robert-warneke'. |
repo |
The repository name. Default is 'github-cards'. |
showUsername |
Display the username in the card title. Default is 'false'. |
showLicense |
Display the repository license on the card. Default is 'true'. |
theme |
The color theme of the card. Default is 'light'. |
bgColor |
Background color of the card. |
borderColor |
Border color of the card. |
textColor |
Color of all the card text. |
titleTextColor |
Color of the card title text. Overrides 'textColor'. |
descriptionTextColor |
Color of the card description text. Overrides 'textColor'. |
dataTextColor |
Color of the card data (language, license, stars, watching, and forks) text. Overrides 'textColor'. |
langTextColor |
Color of the card language text. Overrides 'textColor' and 'dataTextColor'. |
licenseTextColor |
Color of the card license text. Overrides 'textColor' and 'dataTextColor'. |
starTextColor |
Color of the card star text. Overrides 'textColor' and 'dataTextColor'. |
watchTextColor |
Color of the card watching text. Overrides 'textColor' and 'dataTextColor'. |
forkTextColor |
Color of the card fork text. Overrides 'textColor' and 'dataTextColor'. |
langDotColor |
Color of the language dot. |
iconColor |
Color of all the icons. |
repoIconColor |
Color of the repo icon. Overrides 'iconColor'. |
licenseIconColor |
Color of the license icon. Overrides 'iconColor'. |
starIconColor |
Color of the star icon. Overrides 'iconColor'. |
watchIconColor |
Color of the watching icon. Overrides 'iconColor'. |
forkIconColor |
Color of the forks icon. Overrides 'iconColor'. |
🔍 Example of the default 'GitHub Contribution Chart Card':
🔍 Example of the
'showFullYear'parameter key with the value'true':
🔍 Example of the
yearparameter key with a specified year:
🔍 Example of the
'showUsername'parameter key with the value'false':
🔍 Example of the
'theme'parameter key with the value'dark':
Follow these steps to use the 'GitHub Contribution Chart Card' in your README file or any other place:
- Embed the URL as an image:
- Replace
'USERNAME'with your GitHub username.
🔍 Example:
You can customize the 'GitHub Contribution Chart Card' by providing query parameters in the URL.
Query parameters are added after the main URL using the '?' character, followed by a series of key=value pairs, separated by '&'.
🔍 Example:
https://my-github-cards.vercel.app/api/github-contribution-chart?user=robert-warneke&year=2023In this example:
https://my-github-cards.vercel.app/api/github-contribution-chartis the main URL.'user'is a parameter key and'robert-warneke'is its value.'year'is another parameter key and'2023'is its value.
| Query Parameters | Description |
|---|---|
user |
The username of the GitHub account. Default is 'robert-warneke'. |
year |
Data for the specified year. Defaults to the current year. |
showFullYear |
Displays the current year data beyond the current day... or doesn't! Default is 'false' |
showUsername |
Displays the GitHub username in the top center of the card... or doesn't! Default is 'true' |
showGitHubIcon |
Displays the GitHub Icon... or doesn't! Default is 'true' |
theme |
The color theme of the card. Default is 'light'. |
bgColor |
Background color of the card. |
borderColor |
Border color of the card. |
textColor |
Color of all the card text. Applies to GitHub icon. |
yearLabelColor |
Color of the year and total contribution text labels. Overrides 'textColor'. |
userLabelColor |
Color of the 'username' text. Overrides 'textColor'. |
dayLabelColor |
Color of the day labels. Overrides 'textColor'. |
monthLabelColor |
Color of the month labels. Overrides 'textColor'. |
keyLabelColor |
Color of the 'color box key' labels. Overrides 'textColor'. |
githubIconColor |
Color of the GitHub icon. Overrides 'textColor'. |
🔍 Example of the default 'GitHub Last Commit Badge':
Thank you for your interest in supporting the GitHub Cards project! Your support plays a vital role in maintaining and improving the project. There are various ways you can contribute:
- ⭐ Star the Repository: By starring the GitHub Cards repository on GitHub, you can show your appreciation and help the project reach a wider audience.
- 🗨️ Spread the Word: Help spread the word about GitHub Cards. Whether it's through social media, developer communities, or sharing with your peers, your advocacy can make a significant impact.
- 💖 Sponsor the Project: Consider financially supporting GitHub Cards through GitHub Sponsoring. Your contribution will directly support ongoing development. Click the Sponsor button at the top of the repo, or click here. Any amount is greatly appreciated.
If you have questions or ideas concerning GitHub Cards, you're welcome to reach out. Here are a few ways you can connect:
⚠️ GitHub Issues: If you encounter a problem with the GitHub Cards, have a look at existing issues or open a new one. This is the best place to discuss technical issues or suggest new features.- 📧 Email: If you'd prefer to discuss something in private, you can send me an email. Please use this sparingly, as it's more efficient for us to have most discussions in the open on GitHub issues. hello@robertwarneke.com
ⓘ Please note that GitHub Cards is a community project and is not affiliated with or endorsed by GitHub Inc.