GitHub Dashboard
Project Link - https://github.com/LegedsDaD/Github-Dashboard
A modern, customizable GitHub profile dashboard generator built with React, TypeScript, Vite, Tailwind CSS, and Vercel Serverless Functions.
Generate beautiful SVG GitHub dashboards displaying your profile information, repository statistics, programming languages, and top repositories. Embed the generated dashboard directly into your GitHub profile README or any Markdown-supported website.
Status
| Item | Status |
|---|---|
| Build | Passing |
| Deployment | Live |
| Version | v1.0.0 |
| License | MIT |
Live Demo
Website
https://github-dashboard-sooty.vercel.app/
API Example
https://github-dashboard-sooty.vercel.app/api/dashboard?username=octocat
Quick Start
Option 1 (Recommended)
Visit the website and generate your dashboard without writing any URLs manually.
https://github-dashboard-sooty.vercel.app/
The generator lets you:
- Enter your GitHub username
- Choose from multiple themes
- Enable or disable dashboard sections
- Preview your dashboard instantly
- Copy the generated Markdown with one click
- Copy the SVG URL
- Customize your dashboard without editing query parameters manually
This is the easiest way to create your dashboard.
Option 2 (Manual)
Embed the dashboard directly in your README.
Using a theme:
Example:
Features
- GitHub Profile Card
- Repository Statistics
- Additional GitHub Metrics
- Top Programming Languages
- Most Starred Repositories
- Multiple Built-in Themes
- Responsive Dashboard Generator
- SVG Generation API
- GitHub README Ready
- Copy Markdown Support
- Live Preview
- Section Visibility Controls
- Highly Customizable
Theme Gallery
Below are live examples of every available theme.
Midnight
Ocean
Sunset
Forest
Dracula
Nord
Rosé Pine
Catppuccin
GitHub
Mono
API
Endpoint
/api/dashboard
Parameters
| Parameter | Description | Required |
|---|---|---|
| username | GitHub username | Yes |
| theme | Dashboard theme | No |
| sections | Comma-separated list of sections | No |
Example:
/api/dashboard?username=octocat
With theme:
/api/dashboard?username=octocat&theme=forest
With custom sections:
/api/dashboard?username=octocat§ions=profile,stats,languages,repositories
Available Sections
You can choose which sections appear on your dashboard.
- Profile
- Statistics
- Additional Statistics
- Languages
- Top Repositories
Example:
sections=profile,stats,languages
If a section is omitted, it will not be displayed.
Available Themes
- Midnight
- Ocean
- Sunset
- Forest
- Dracula
- Nord
- Rosé Pine
- Catppuccin
- GitHub
- Mono
Project Structure
api/
dashboard.js
src/
App.tsx
main.tsx
config.ts
themes.ts
utils/
public/
package.json
vite.config.ts
vercel.json
Development
Clone the repository.
git clone https://github.com/YOUR_USERNAME/Github-Dashboard.git
Install dependencies.
npm install
Start the development server.
npm run dev
Build the project.
npm run build
Preview the production build.
npm run preview
Roadmap
| Feature | Status |
|---|---|
| SVG Dashboard Generator | Complete |
| Dashboard Builder | Complete |
| Theme Support | Complete |
| Section Toggle | Complete |
| GitHub API Integration | Complete |
| Markdown Generator | Complete |
| More Themes | Planned |
| Dashboard Templates | Planned |
Contributing
Contributions are welcome.
- Fork the repository.
- Create a feature branch.
- Commit your changes.
- Push the branch.
- Open a Pull Request.
More Themes
Want your theme to get added ?
- Fork the repository.
- Add your theme to src\themes.ts.
- Open a Pull Request.
- Your theme will be added !
License
This project is licensed under the MIT License.
Top comments (0)