1

GitHub Button Group

Segmented button group displaying multiple GitHub repo metrics (stars, forks, watchers, issues) with per-segment links.

class-variance-authority

Preview

Installation

$ shadcn add https://ui.justinlevine.me/r/github-button-group.json

Usage

import { GitHubButtonGroup } from "@/components/github-button-group"
<GitHubButtonGroup owner="shadcn-ui" repo="ui" />

Async server component. Fetches all repo metrics in a single GitHub API call at build time, cached for 1 hour.

Playground

Star109.3kFork8.1kWatch315

Props

import { GitHubButtonGroup } from "@/components/github-button-group"

<GitHubButtonGroup owner="shadcn-ui" repo="ui" />

Examples

Variants

Default

Star109.3kFork8.1kWatch315

Secondary

Star109.3kFork8.1kWatch315

Outline

Star109.3kFork8.1kWatch315

Ghost

Star109.3kFork8.1kWatch315

Subtle

Star109.3kFork8.1kWatch315

With repo name

Default + Repo

shadcn-ui/uiStar109.3kFork8.1kWatch315

Secondary + Repo

shadcn-ui/uiStar109.3kFork8.1kWatch315

Outline + Repo

vercel/next.jsStar138.3kFork30.6kWatch1.5k

Custom metrics

Stars + Forks

Star109.3kFork8.1k

Secondary — Stars + Forks

Star109.3kFork8.1k

All Metrics

Star109.3kFork8.1kWatch315Issues1.8k

Icon styles

GitHub Green

shadcn-ui/uiStar109.3k

Copilot Purple

shadcn-ui/uiStar109.3k

Secondary + GitHub Green

shadcn-ui/uiStar109.3k

Secondary + Copilot Purple

shadcn-ui/uiStar109.3k

API Reference

GitHubButtonGroup

PropType

Notes

  • Each metric segment links to the corresponding GitHub page (stargazers, forks, watchers, or issues).
  • Returns null if the GitHub API call fails — handle with a Suspense boundary or fallback.