Get started
Data display
Data entry
General
Layout
Navigation
Blocks
Packages
A responsive grid of AI provider cards, from the host's entries or a sample, that calls back with the provider key a card selects.
tsx
1
2
3import type { ReactNode } from 'react';
import {Installation#
bash
pnpm dlx shadcn@latest add https://ui.zeroxsolutions.com/r/ai-provider-picker.jsonUsage#
tsx
import { AiProviderPicker } from '@/components/ai-provider-picker';With no entries, the block shows its sample providers. Every card is a button that calls onSelect with its
entry's provider key:
tsx
<AiProviderPicker onSelect={(provider) => setProvider(provider)} />API reference#
AiProviderPicker#
Renders a div and takes every prop a div takes, plus:
| Prop | Type | Default |
|---|---|---|
entries | readonly AiProviderPickerEntry[] | AI_PROVIDER_PICKER_SAMPLE_ENTRIES |
onSelect | (provider: string) => void | none |
Its grid is one column, two from the sm breakpoint and three from lg;
a className merges with those classes, so lg:grid-cols-2 replaces only the three-column step.
AiProviderPickerEntry#
One card's data.
| Field | Type | Holds |
|---|---|---|
provider | string | the key AiProviderIcon resolves, such as openai |
name | string | the card's title |
description | string | the text under the title, clamped to two lines |
meta | string, optional | the muted footer note, such as 12 models; omitted, no footer |
AI_PROVIDER_PICKER_SAMPLE_ENTRIES#
The sample entries the block shows with no entries: providers the @zeroxsolutions/icons brand set has a mark
for, with names, blurbs and model counts only.