<RepositoryCard 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, format items.
npx shadcn add JanaSundar/ovio/repository-card↳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 { RepositoryCard } from "@/components/ovio/repository-card/repository-card"
<RepositoryCard
variant="minimal"
repository={repository}
/>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 getRepository("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: the repository. |
| Auth | Optional. GITHUB_TOKEN (or { token }) raises the limit from 60 to 5,000 requests an hour. |
| Limits | One request per refresh. |
| 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 honojs/hono, 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 |
|---|---|---|
| variant | | "minimal" | "craft" | "retro" | "toy" | Which world to render. Defaults to the nearest OvioProvider, then minimal. |
| repository | { owner; name; description?; language?; stars; forks; issues?; updatedAt? } | Repository data. Fetch it on the server with getRepository(). |
| stats | ("stars" | "forks" | "issues")[] | Which counts to show. |
| starred / onStarredChange | boolean · (starred) => void | The Toy star key toggles it. |
| className | string | Merged onto the root. |