Top Contributors

<TopContributors variant="minimal" />Clean surfaces and measured motion.

Installation

Use the shadcn CLI to copy the component source and its dependencies into your own project. Installs motion and @number-flow/react, plus the Ovio theme, world, motion, rolling-number, toy, avatar, format items.

npx shadcn add JanaSundar/ovio/top-contributors

↳You own the source. Ovio components arrive in your codebase so you can edit any part of their style, behavior, or data flow.

Usage

Set the visual world on the component, or wrap the page in an OvioProvider to set a default for everything inside it.

TSXvariant="minimal"

import { TopContributors } from "@/components/ovio/top-contributors/top-contributors"

<TopContributors
  variant="minimal"
  contributors={contributors}
/>

Built with: CSS · Motion for React
Motion in Minimal: Small springs, opacity and layout shifts that show state.

Data

Fetch it on the server with getContributors("owner/name") and pass the result as props. The helper is lib/github.ts, added with the CLI.

npx shadcn add JanaSundar/ovio/github

Source	GitHub's REST API: weekly commit stats per contributor, for the 30-day, 90-day and all-time windows. Bots are left out.
Auth	Optional. GITHUB_TOKEN (or { token }) raises the limit from 60 to 5,000 requests an hour.
Limits	One request, or up to four: GitHub answers 202 while it computes the stats, so the helper retries, then falls back to all-time counts.
Caching	Cached for an hour by default (revalidate: 3600), so traffic adds no API calls. A failed refresh keeps serving the last good data, and a spent limit throws RateLimitError with the time it resets.
This demo	Live data from withastro/starlight, through the same helper. If the API fails, the sample shows instead.

Props

Control the data, selected world, animation behavior, and callbacks.

Prop	Type	Description
contributors	{ login; name?; avatarUrl?; commits; byPeriod? }[]	Ranked by commits in the chosen window.
variant	\| "minimal" \| "craft" \| "retro" \| "toy"	Which world to render. Defaults to the nearest OvioProvider, then minimal.
repo	string	Header label, e.g. "ada-dev/lumen".
limit	number	Max people shown. Default 6.
period / defaultPeriod	"30d" \| "90d" \| "all"	Time window, controlled or not. Default "90d".
onPeriodChange	(period) => void	Fires when the window changes.
periods	ContributorPeriod[]	Windows offered; [] hides the switcher.
className	string	Merged onto the root.