GitHub Bento Stats

A React component to display GitHub stats in a bento-style layout.

Next.jsTypeScriptTailwindshadcn uigraphQL

GitHub Live Demo

GitHub Bento Stats

A React component to display GitHub stats in a bento-style layout.

Image

preview

Installation

Install the package using npm:

npm i github-bento-stats

Usage

1'use client';
2
3import { GitHubBento } from 'github-bento-stats';
4
5const Page = () => {
6  const gitToken = process.env.NEXT_PUBLIC_GITHUB_TOKEN;
7  
8  if (!gitToken) {
9    console.log("GitHub Token is not found");
10    return null;
11  }
12
13  return (
14    <div>
15      <GitHubBento
16        username='idityaGE'
17        githubToken={gitToken}
18        showGraph
19      />
20    </div>
21  );
22};
23
24export default Page;

Props

Prop	Type	Description
`username`	string	GitHub username.
`githubToken`	string	GitHub personal access token (PAT).
`showGraph`	boolean	Show contribution graph (optional).

Environment Variables

Make sure to set up your GitHub token as an environment variable:

NEXT_PUBLIC_GITHUB_TOKEN=your_github_token

< SEE ALL PROJECTS