github-card 🌈
Beautiful embeddable GitHub profile card for your portfolio.
https://rocktimsaikia.github.io/github-card/
Highlights
- Tiny and zero-dependency (
~4kb) - Minimal and neat design
- Dark theme available
Installation
npm install @rocktimsaikia/github-card
or with yarn
yarn add @rocktimsaikia/github-card
Usage
Since this is an ESM web component, you can use it either through installation or directly as a script.
Import it in your JavaScript:
import '@rocktimsaikia/github-card'
Then use the element anywhere in your HTML:
<github-card data-user="rocktimsaikia"></github-card>
Or skip the install and load it straight from a CDN in an HTML file:
<script type="module" src="https://unpkg.com/@rocktimsaikia/github-card"></script>
Attributes
| Attribute | Required | Description |
|---|---|---|
data-user |
yes | GitHub username to render the card for |
data-theme |
no | Set to dark for the dark theme; omit for the default light theme |
Theme
<github-card data-user="rocktimsaikia" data-theme="dark"></github-card>
Customization
Override the accent color with the --gh-accent CSS custom property on the element:
github-card {
--gh-accent: #6366f1;
}
The card also surfaces location, company, and website from the GitHub profile when present.
License
2026 © MIT Rocktim Saikia