CI Badge

GitHub Actions CI status badge showing passing, failing, pending, or cancelled state.

$ shadcn add @jalco/ci-badge

Usage

import { CIBadge } from "@/components/ci-badge"

<CIBadge owner="vercel" repo="next.js" />

Async server component — fetches the latest workflow run from the GitHub Actions API at build time, cached 10 minutes via ISR.

Compact pill with status dot and label. The default layout.

Passing

Failing

Pending

Show workflow name, branch, and duration alongside the status.

Full details

Feature card showing workflow name, status, branch, duration, and run time.

Card layout

PropType

ISR caching. CI status data is cached for 10 minutes via next.revalidate. Set GITHUB_TOKEN to raise the rate limit from 60 → 5,000 req/hr.
Pre-fetched data. Pass the data prop to skip the API call — useful for static builds or when fetching data separately.
Status colors. Passing = green, failing = red, pending = amber (animated pulse), cancelled/skipped = gray.