About github-card

Github profile web component that actually looks good

r

Published by

Visit View Profile

README.md

Beautiful embeddable GitHub profile card for your portfolio.
https://rocktimsaikia.github.io/github-card/

npm install @rocktimsaikia/github-card

or with yarn

yarn add @rocktimsaikia/github-card

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>

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

<github-card data-user="rocktimsaikia" data-theme="dark"></github-card>

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.