AI Provider Card

A small card for one AI provider in an overview grid, whose footer note carries a status dot and whose covering trigger selects it.

OpenAI

GPT reasoning and chat models for general-purpose assistance.

12 models

Local model

Runs on this machine, no network required.

Starting up

No provider selected

tsx

1
2
3'use client';

import { useState, type ReactNode } from 'react';

Installation

bash

pnpm dlx shadcn@latest add https://ui.zeroxsolutions.com/r/ai-provider-card.json

Usage

tsx

import {
  AiProviderCard,
  AiProviderCardAction,
  AiProviderCardDescription,
  AiProviderCardLabel,
  AiProviderCardTrigger,
} from '@/components/data-display/ai-provider-card';

The consumer composes a CardHeader holding CardTitle and an AiProviderCardDescription for the brand mark, name and blurb, a CardFooter holding the label and the action, and a trigger that covers the card:

tsx

<AiProviderCard>
  <CardHeader>
    <CardTitle>OpenAI</CardTitle>
    <AiProviderCardDescription>GPT reasoning and chat models for general-purpose assistance.</AiProviderCardDescription>
  </CardHeader>
  <CardFooter>
    <AiProviderCardLabel tone="online">12 models</AiProviderCardLabel>
    <AiProviderCardAction>
      <Switch aria-label="Enable OpenAI" />
    </AiProviderCardAction>
  </CardFooter>
  <AiProviderCardTrigger aria-label="Select OpenAI" />
</AiProviderCard>

Use it for a grid the user picks one provider from; for the models within a provider, use Model List instead.

Composition

text

AiProviderCard
|-- CardHeader
|   |-- CardTitle
|   `-- AiProviderCardDescription
|-- CardFooter
|   |-- AiProviderCardLabel
|   `-- AiProviderCardAction
`-- AiProviderCardTrigger

API reference

AiProviderCard

Renders shadcn's Card and takes every prop it takes. It defaults Card's size to sm. It sets data-slot="ai-provider-card".

AiProviderCardAction

Renders a div and takes every prop a div takes. It stacks above the AiProviderCardTrigger, so a control placed inside it (such as a Switch) does not select the card when activated. It sets data-slot="ai-provider-card-action".

AiProviderCardDescription

Renders shadcn's CardDescription and takes every prop it takes. Its text clamps to two lines. It sets data-slot="ai-provider-card-description".

AiProviderCardLabel

Renders a span and takes every prop a span takes, plus:

Prop	Type	Default
`tone`	`'online' \| 'offline' \| 'busy' \| 'idle'`	-

A model count or an attention message in muted text. Given a tone, a StatusIndicator before the text reports the status; the text itself keeps one colour at every tone. It sets data-slot="ai-provider-card-label".

AiProviderCardTrigger

Renders a button and takes every prop a button takes. It covers the whole card below any AiProviderCardAction, so the card is one keyboard stop; give it an aria-label naming the provider. It sets data-slot="ai-provider-card-trigger".