# GitHub button (goodtabs UI)

An outline pill linking to a repo, with the GitHub mark and a formatted star count.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/github-button.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/github-button`

## Usage

```tsx
import { GitHubButton } from "@/components/ui/github-button"

<GitHubButton repo="shadcn-ui/ui" stars={98400} />
<GitHubButton repo="vercel/next.js" label="vercel/next.js" stars={136200} size="sm" />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| repo | `string` |  | The repository as owner/name. Builds the href. |
| stars | `number` |  | Star count, formatted as 1.2k. Leave out to hide it. |
| label | `string | null` | `"Star"` | Visible label. Pass the repo name, or null for mark and count only. |
| size | `"sm" | "default"` | `"default"` | 28px or 32px tall. |

## When to use

- In a header or hero of an open source project, next to the primary action
- In a footer or docs page where the repo is the canonical link
- Anywhere a star count is a useful signal and you already have the number

## When not to use

- When you cannot supply the count: it never fetches, and a stale number is worse than none
- For a generic external link, use a plain outline Button with an anchor
- For social profile links, use social-links

## Notes for agents

- Pass stars from your own fetch (the GitHub API's stargazers_count); formatStars is exported if you need the same format elsewhere
- It is shadcn's Button with asChild around an anchor, opening in a new tab with rel noreferrer
- The accessible name is the label plus 'owner/name on GitHub, 1,234 stars', so icon-only use still reads well
- The GitHub mark is an inline SVG in currentColor, since lucide ships no brand icons

Docs: https://ui.goodtabs.co/components/github-button