GitHub Readme Tech Stack

Display your favorite technologies, tools, or the tech stack your project uses with these fully customizable, good-looking cards on your GitHub README!

---

⚡ Quick Start

The easiest way to start using these cards is to visit our website, where you can customize your card with a live preview.
https://github-readme-tech-stack.vercel.app

---

🔧 Query parameters

None of the fields are required. Every query parameter has a default value displayed below.

Parameter	Example	Default value	Description
title	?title=My%20Title	My Tech Stack	The title of the card. %20 can be used as a space.
theme	?theme=github_dark	github	The theme of the card. You can browse between the themes here.
align	?align=center	left	The alignment of the badges. (left, center, right)
titleAlign	?align=center	left	The alignment of the title. (left, center, right)
showBorder	?showBorder=false	true	Display the border around the card or not. (true, false)
hideTitle	?hideTitle=true	false	Display the title of the card or not. (true, false)
hideBg	?hideBg=true	false	If true, sets the background to transparent. (true, false)
borderRadius	?borderRadius=12.5	4.5	Number between 0 and 50.
fontFamily	?fontFamily=consolas	Segoe UI	The font family of the title. If the specified family doesn't exist, the default is used.
fontSize	?fontSize=20	18	The size of the title. Accepts a number between 15 and 30.
fontWeight	?fontWeight=normal	semibold	The thickness of the title. (thin, normal, semibold, bold)
width	?width=500	495	The width of the card. Accepts a valid number.
gap	?gap=15	10	The gap between the badges. Accepts a number between 0 and 30.
lineHeight	?lineHeight=10	7	The gap between the lines. Accepts a number between 0 and 30.
lineCount	?lineCount=2	1	The number of lines you want to add to your card.
line{n}	?line1=html5,html5,auto	-	The current line of the badge, where {n} is a number. (1 <= n <= lineCount)

---

🪁 Themes

These cards come with several built-in themes you can use. You can find all of them by clicking here.
If you have a cool new theme in mind, or add one for yourself and others, please check #45

🖌 Customizing a theme

You can customize a theme using these query parameters.
These parameters accept only valid hexadecimal colors, otherwise, they are not applied. Please use %23 instead of #.

Warning
If the ?theme= parameter is specified, any of these color customizations will override the theme's values.

Parameter	Example	Description
bg	?bg=%2383324c	The color of the background.
border	?border=%232da7c7	The color of the border.
badge	?badge=%2383324c	The color of the badges.
titleColor	?titleColor=%232da7c7	The color of the title.

---

❗ Important

• We suggest you not put too many badges inside one card, because the loading time can be too slow, and it can overflow the 15s limit, which results in a card that's not displayed. The maximum amount of badges inside one card should be around 16. If you want to display more, do it in two or three cards.
• If you use our Demo Website to generate and customize your card, and it displays an empty screen, it's because your browser cached the previously deployed names of the JS bundles. In order to resolve this issue, clear your browser's cache or open the site in incognito mode.
• The cards display shields.io badges. You can browse between the choosable icons here.

---

🧠 Tips

🪢 Align the card in the markdown

If you're using markdown, you may want to align your cards. There's an easy way to do it with the align attribute:

<img align="center" src="https://github-readme-tech-stack.vercel.app/api/cards" alt="My Tech Stack" />

📚 GitHub's media feature

You can use GitHub's new feature to specify whether to display images for light or dark mode users.

<picture>
  <source
    srcset="https://github-readme-tech-stack.vercel.app/api/cards?theme=github_dark&lineCount=1&line1=typescript,typescript,auto"
    media="(prefers-color-scheme: dark)"
  />
  <source
    srcset="https://github-readme-tech-stack.vercel.app/api/cards?theme=github&lineCount=1&line1=typescript,typescript,auto"
    media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  />
  <img src="https://github-readme-tech-stack.vercel.app/api/cards?theme=github&lineCount=1&line1=typescript,typescript,auto" />
</picture>

🎭 Adding custom SVG logo

We support this using Base64 format. * Here's an easy 3-step guide:

1. Download the SVG and use one of the many online tools, e.g. http://b64.io/, to encode it.
2. Encode the Base64 string in percent-encoding. Take the Base64 string and use one of the many online tools, e.g. http://meyerweb.com/eric/tools/dencoder/, to encode the string.
3. Finally, replace the first element of a badge (the logoName) with this string inside the URL. (<Base64>,typescript,2D79C7;)

---

⚒️ Building from source

If you don't have NodeJS, download and install it.
Then open a terminal and type these commands:

Backend:

# Clone the project:
git clone https://github.com/0l1v3rr/github-readme-tech-stack.git
cd github-readme-tech-stack

# Install the dependencies:
npm i
npm run prepare

# Run the application:
npm run dev

Frontend:

cd client

# Install the dependencies:
npm i

# Run the application:
npm start

---

🧑‍🤝‍🧑 Contributing

Every contribution is welcomed.
You can find a contributing guideline here.
This project is licensed under the MIT License.

---

💡 Inspiration

• github-readme-streak-stats
• github-readme-stats
• github-profile-summary-cards
• markdown-badges
• shields.io
• simple-icons