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