The detail panel for one model: an identity header composed from Item parts over titled sections.
OpenAI
gpt-4o1
2
3import type { ReactNode } from 'react';
import {Installation#
pnpm dlx shadcn@latest add https://ui.zeroxsolutions.com/r/model-info-card.jsonUsage#
import { ModelInfoCard, ModelInfoCardIndicator, ModelInfoCardSection } from '@/components/data-display/model-info-card';<ModelInfoCard>
<Item size="xs">
<ItemMedia>
<AiProviderIcon provider="openai" />
</ItemMedia>
<ItemContent>
<ItemTitle>GPT-4o</ItemTitle>
<ItemDescription>OpenAI</ItemDescription>
</ItemContent>
<ItemFooter>
<code className="text-muted-foreground text-xs">gpt-4o</code>
</ItemFooter>
</Item>
<ModelInfoCardSection>
<Item size="xs">
<ItemMedia>
<ModelInfoCardIndicator tone="chart-2" />
</ItemMedia>
<ItemContent>
<ItemTitle>Context length</ItemTitle>
</ItemContent>
<ItemActions>128K tokens</ItemActions>
</Item>
</ModelInfoCardSection>
</ModelInfoCard>It is meant for the shipped HoverCardContent: compose the identity header from Item parts, then one
ModelInfoCardSection per detail. Use it for a model's own info panel; for a provider's tile in a picker grid,
use AI Provider Card instead.
Composition#
ModelInfoCard
|-- Item
| |-- ItemMedia
| |-- ItemContent
| | |-- ItemTitle
| | `-- ItemDescription
| `-- ItemFooter
`-- ModelInfoCardSection
`-- Item
|-- ItemMedia
| `-- ModelInfoCardIndicator
|-- ItemContent
| `-- ItemTitle
`-- ItemActionsAPI reference#
ModelInfoCard#
Renders a div and takes every prop a div takes. The identity header and every section stack in a vertical
flex. It sets data-slot="model-info-card".
ModelInfoCardIndicator#
Renders a span and takes every prop a span takes, plus:
| Prop | Type | Default |
|---|---|---|
tone | 'muted' | 'chart-1' | 'chart-2' | 'chart-3' | 'chart-4' | 'chart-5' | muted |
The accent bar beside a section's title, in one of the theme's chart colours, or muted when no tone is given. It
is hidden from assistive technology. It sets data-slot="model-info-card-indicator" and aria-hidden.
ModelInfoCardSection#
Renders a div and takes every prop a div takes. A titled section inside a ModelInfoCard: an Item heading
row (a ModelInfoCardIndicator in its ItemMedia, an ItemTitle, and an optional ItemActions value) over the
detail lines. It sets data-slot="model-info-card-section".