github-readme-profile
github-readme-profile copied to clipboard
🙀 Generate your Stats GitHub Profile in SVG
GitHub Readme Profile
🙀 Generate your Stats GitHub Profile in SVG
Report Bugs · Request Feature · Ask Question
📌 Features
- 🎴 Getting Started
- 🎨 Themes
- ✏️ Customization
- 📑 License
- Deploy on ▲ Vercel
- 💳 Credits
- 💰 Donate
- 👥 Contributions
🎴 Getting Started
Copy-paste this into your markdown content, and that is it. Simple!
Change the ?username= value to your GitHub username.
[](https://github.com/FajarKim/github-readme-profile)
🎨 Themes
With inbuilt themes, you can customize the look of the card without doing any manual customization.
Use &theme=THEME_NAME parameter like so:

All inbuilt themes
GitHub Readme Profile comes with several built-in themes (e.g. transparent, dark, highcontarst).
| Themes | Preview |
|---|---|
default |
|
transparent |
|
dark |
|
highcontrast |
You can look at a preview for all available themes. You can also contribute new themes if you like, contributing guidelines can be found here.
✏️ Customization
You can customize the appearance of all your cards however you wish with URL parameters.
Options
Name |
Description |
Type |
Default value |
|
Card's title color. |
string (hex color) |
|
|
Body text color. |
string (hex color) |
|
|
Icons color. |
string (hex color) |
|
|
Card's border color. Does not apply when |
string (hex color) |
|
|
Card's background color. |
string (hex color or a gradient in the form of angle,start,end) |
|
|
Profile image border color. Does not apply when |
string (hex color) |
|
|
Username text color. |
string (hex color) |
|
|
Name of the theme, choose from all available themes. |
enum |
|
|
Sets the language in the card, you can check full list of available locales here. |
enum |
|
|
Sets the border's width manually. |
number |
|
|
Corner rounding on the card. |
number |
|
|
Hides the specified items from stats. |
string (comma-separated values) |
|
|
Shows additional items on stats card. |
string (comma-separated values) |
|
|
Output format card option (i.e. |
enum |
|
|
Disables all animations in the card. |
boolean |
|
|
Hides the card's border. |
boolean |
|
|
Hides the image's profile stroke in the card. |
boolean |
|
Use the transparent theme
We have included a transparent theme that has a transparent background. This theme is optimized to look good on GitHub's dark and light default themes. You can enable this theme using the &theme=transparent parameter like so:

Add transparent alpha channel to a themes bg_color
You can use the bg_color parameter to make any of the available themes transparent. This is done by setting the bg_color to a color with a transparent alpha channel (i.e. bg_color=00000000):

Use GitHub's theme context tag
You can use GitHub's theme context tags to switch the theme based on the user GitHub theme automatically. This is done by appending #gh-dark-mode-only or #gh-light-mode-only to the end of an image URL. This tag will define whether the image specified in the markdown is only shown to viewers using a light or a dark GitHub theme:
[](https://github.com/FajarKim/github-readme-profile#gh-dark-mode-only)
[](https://github.com/FajarKim/github-readme-profile#gh-light-mode-only)
Use gradient color
You can use the bg_color parameter to make gradient color. This is done by setting the bg_color with format angle,start,end (comma-separated value).

Hiding individual stats
You can pass a query parameter &hide= to hide any specific stats with comma-separated values.
Options:
&hide=repos,stars,forks,commits,prs,prs_merged,issues, contributed

Showing additional individual stats
You can pass a query parameter &show= to show any specific additional stats with comma-separated values
Options:
&show=reviews,issues_closed,discussions_started,discussions_answered

Available locales
Code |
Locale |
|
English |
|
Arabic (العربية) |
|
French (Français) |
|
Indonesian (Bahasa Indonesia) |
|
Japanese (日本語) |
|
Korean (한국어) |
See more available locale. The locale code added to file should be a 2-letter abbreviation from ISO 639-1 or a 4-letter code with a language and country code (eg. id or pt-BR). Anything appearing in the list should be fine. You can also contribute new translations if you like, contributing guidelines can be found here.

📑 License
GitHub Readme Profile is released under the MIT license, which grants the following permissions:
- Commercial use
- Modification
- Distribution
- Private use
For more convoluted language, see the LICENSE.
Deploy on ▲ Vercel
Step-by-step guide on setting up your own Vercel instance.
- Go to vercel.com.
- Click on
Log In. - Sign in with GitHub by pressing
Continue with GitHub. - Sign in to GitHub and allow access to all repositories if prompted.
- Fork this repository.
- Go back to your Vercel dashboard.
- To import a project, click the
Add New...or+button and select theProjectoption. - Click the Continue with GitHub button, search for the required Git Repository and import it by clicking the
Importbutton. Alternatively, you can import a Third-Party Git Repository using theImport Third-Party Git Repositorylink at the bottom of the page. - Create a personal access token (PAT) here and enable the
repoanduserpermissions (this allows access to see private repo and user stats). - Add the PAT as an environment variable named
GH_TOKEN_1. - Repeat step number 9 and add PAT up to the
GH_TOKEN_3environment variable. - In build and output settings, you set install command toggle and add command
npm install typescript. - Click deploy, and you're good to go. See your domains to use the API!
💳 Credits
This repository contains forked from tuhinpal/readme-stats-github and inspired from anuraghazra/github-readme-stats.
💰 Donate
Love the project? Please consider donating to help it improve!
Are you considering supporting the project by donating to me? Please DO NOT!!
Please visit this link and make a small donation to help the people in need. A small donation goes a long way. ❤️
👥 Contributions
Contributions are welcome!
Specially thanks ❤️ for contributors bellow:
Want to contribute? Please note our contribution guidelines here.
Made with ❤️ and TypeScript
Copyright © 2023-present Rangga Fajar Oktariansyah