Model Manager Card
A dense admin model row rendered as a card — select, icon, name + ids, a 2-column spec grid, capabilities, and row actions; every admin-table column, top-to-bottom.
A dense admin "model row" rendered as a card. It carries every column a model-management table needs — a select control, an icon, the name with status badges, id chips, a 2-column labelled spec grid (provider, developer, type, status, context or resolution, max output, price in/out), capability badges, and row actions — laid out top-to-bottom so model management reads on any width instead of a wide scrolling table.
It is domain-agnostic: every value is a slot the consumer fills, so no app types, pricing, or i18n leak into the design system.
Import
import { ModelManagerCard } from "@yuhuanowo/yunui/ai";
Example
selectSlot and actions are slots; the example wires a stateful Checkbox into the select slot and renders icon buttons for the actions. fields is an array of { label, value, full? } (set full to span both grid columns).
ModelManagerCard
- Provider
- Anthropic
- Type
- Chat
- Context
- 200K
- Max output
- 128K
- Status
- Approved
- Price (in / out)
- $5 / $25 per M
Anatomy
- Top control bar —
selectSlot(left) andactions(right). Keeps both off the content so the icon stays flush-left. - Identity —
icon·name+nameBadges(YAML / deprecated / suspended …) ·idschips. - Spec grid —
fieldslaid out in 2 columns; a field withfull: truespans both. - Capabilities — an optional
labeland the capability badges.
A long, unbreakable model name wraps inside the card rather than widening the column.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| actions | ReactNode | — | Row actions (edit / enable / inspect / delete …) — sit at the right of the top control bar (no footer rule). |
| capabilities | { label?: ReactNode; value: ReactNode; } | — | Capability badges + an optional label. |
| className | string | — | |
| fields | ModelManagerField[] | — | Labelled specs — provider, developer, type, status, context/resolution, max output, price, … — laid out in a 2-column grid. |
| icon | ReactNode | — | Leading model icon. |
| ids | ReactNode | — | Id / alias chips rendered under the name. |
| name* | ReactNode | — | Model display name (the card title). |
| nameBadges | ReactNode | — | Inline status badges next to the name (YAML, deprecated, inactive, suspended…). |
| selected | boolean | — | Mark the row selected (a ring + tint). |
| selectSlot | ReactNode | — | Row-select control (a checkbox). Sits at the left of the top control bar. |