AI
Model Card
A card summarizing an AI model — icon, capabilities, ids, and a developer/context/price footer.
A card that summarizes an AI model: a provider/model icon, the display name, capability chips, copyable id badges, a short description, and a footer with the developer, context window, tier, and price. Pass onClick to make the whole card a keyboard-activatable button.
Import
import { ModelCard } from "@yuhuanowo/yunui/ai";
Basic
The icon slot is host-rendered — pass a <ProviderIcon> (or <ModelIcon>) so the card stays framework-agnostic.
Basic
GPT-4o
Multimodal flagship model with vision and fast responses.
OpenAI
128K$2.50/M
Status badges
Use nonofficial and suspended to flag a model's availability. A tier chip is shown unless it is "free".
Status badges
Claude Opus 4Unofficial
High-reasoning model for complex, long-running tasks.
Anthropic
200Kpro
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| capabilities | string[] | [] | Capability keys (e.g. "vision", "thinking") → coloured icons (first 4 shown). |
| className | string | — | |
| context | string | — | e.g. "128K" or "1024×1024". |
| description | ReactNode | — | Short description (falls back to a "No description" label). |
| developer | { label: string; iconUrl?: string; } | — | Developer/maker shown in the footer, with an optional icon. |
| icon | ReactNode | — | Avatar slot — host renders the provider/model icon. |
| ids | string[] | [] | Primary id + aliases, shown as mono badges. |
| labels | { nonofficial?: string; suspended?: string; noDescription?: string | undefined; } | undefined | — | Localized strings for the unofficial/suspended badges and the empty-description fallback. |
| name* | string | — | Model display name. |
| nonofficial | boolean | — | Mark the model as unofficial (shows a warning badge). |
| onClick | (() => void) | — | Makes the whole card a clickable button (keyboard-activatable). |
| price | ReactNode | — | Formatted price node, e.g. "$0.50/M". |
| suspended | boolean | — | Mark the model as suspended (shows a paused badge). |
| tier | string | — | Optional tier chip (e.g. "pro"); a `"free"` tier is hidden. |