Skip to content
Atomus

Model selector

A Select for AI models. The ghost style sits in the Prompt input toolbar; the outline style suits settings. Options show the provider, when to pick the model and its capabilities.

Outline — settings
Default model
Ghost — in a prompt toolbar (open)
Atomus ProNewStanVision · Best for long, careful workReasoningToolsVision
Atomus FastStanVision · Quick answers and draftsToolsFast
Claude SonnetAnthropic · Coding and analysisReasoningToolsVision
Local 8BOn device · Private, works offlineFast
variant="ghost" (open) · variant="outline" with showLabelLive · light and dark follow the theme switch

Add the source to a shadcn project

npx shadcn@latest add https://docs.atomus.io/r/ai-model-selector.jsonOpen in v0

Installs the component source, its CSS and the Atomus tokens into components/atomus/. How the registry works

In Figma

Section titled “In Figma”

From guidelines/components/ai-model-selector.md

Properties, variants and anatomy of the Figma components. React props use the same names.

Model selector

Section titled “Model selector”

Select for AI models: the trigger shows the provider icon and model name; each option shows the name, a “New” badge, provider and one line on when to pick it, and capability badges (Reasoning, Tools, Vision, Fast). It uses the same select-only combobox pattern as Select. Part of the Agent kit.

Figma: component set Model selector on the 🤖 Agent kit page of Atomus 4.0 (node 25546:1208), connected to React with Code Connect. List rows: Model option (node 25546:397). React props use the same names as the Figma properties below.

Property Type / options
Models list (label, provider, provider icon, description, capabilities, badge, disabled)
Style Ghost · Outline
Size sm · md
Placement Up · Down
Show label boolean (off)

Style

  • Ghost (default) — borderless, for the Prompt input toolbar; opens upwards by default.
  • Outline — bordered like Select, for settings pages; use with showLabel.

Use for

  • Letting people choose the model for a conversation or a feature.

Not for

  • Any other list of options: use Select.

Accessibility

  • Combobox with a listbox: ↑ ↓ Home End move, Enter or Space picks, Esc closes, typing jumps to a model.
  • The trigger has a name (label, default “Model”) even when the label is hidden.
  • Capabilities are text badges, not icons alone.

Usage

Section titled “Usage”
import { ModelSelector } from '@stanvision/atomus-react';


<ModelSelector
  models={[
    { value: 'pro', label: 'Atomus Pro', provider: 'StanVision', icon: <Logo />, description: 'Best for long, careful work', capabilities: ['Reasoning', 'Tools', 'Vision'], badge: 'New' },
    { value: 'fast', label: 'Atomus Fast', provider: 'StanVision', capabilities: ['Fast'] },
  ]}
  value={model}
  onChange={setModel}
/>

Props at a glance

Section titled “Props at a glance”

Full types and defaults are in React API at the end of the page.

  • models — value, label, provider, icon, description, capabilities, badge, disabled.
  • variant — ghost (toolbar) or outline (settings); size sm or md; placement up (default) or down.
  • label names the combobox; showLabel shows it above the trigger.

Design guidance

Section titled “Design guidance”

From the Figma guidelines.

Do

  • Describe models by what they are good at, not by version numbers alone.
  • Keep the list short (up to about six) and put the recommended model first.
  • Disable models the plan or region doesn’t allow, and say why elsewhere.

Forbidden

  • Never switch the model silently in the middle of a conversation.
  • Never show capability badges the model doesn’t support.

React API

Section titled “React API”

Generated from react/src/components by scripts/gen-react-api.mjs — the same tables agents read in guidelines/components/ai-model-selector.md.

Use only these props; anything else is not part of the API.

ModelSelector

Section titled “ModelSelector”

Figma: Model selector — Select for AI models with provider icon, description and capability badges. The same select-only combobox pattern as Select: ↑ ↓ Home End Enter Esc and type-ahead.

import { ModelSelector } from '@stanvision/atomus-react'; — source: react/src/components/ai/ModelSelector.tsx

Prop Type Default Description
models ModelOption[] required Figma: Models
value string — Controlled value.
defaultValue string — Initial value when uncontrolled.
onChange (value: string) => void — Called with the new value.
label string 'Model' Accessible name; shown only when showLabel is set
showLabel boolean false Shows label above the trigger (forms and settings)
variant 'ghost' | 'outline' 'ghost' Figma: Style. ghost (default) — borderless trigger for a prompt toolbar. outline — bordered like Select, for settings pages.
size 'sm' | 'md' 'sm' Figma: Size — sm 32 · md 40
placement 'down' | 'up' 'up' Which way the list opens; up suits a prompt input at the bottom of the screen
disabled boolean — Disables the control.
defaultOpen boolean — Start open (docs and tests)
className string — Extra class on the root element (layout only — never restyle colours or sizes).

Accepts only the props above.

ModelOption:

Field Type Description
value string Model id sent to your backend
label string Display name (“Claude Sonnet 4.5”)
provider? string Provider name (“Anthropic”), shown under the label
icon? ReactNode Figma: Provider icon — the provider’s logo (16–20px)
description? string One line about when to pick it
capabilities? string[] Figma: Capabilities — short badges such as “Vision”, “Tools”, “Reasoning”, “Fast”
badge? string Badge after the name (“New”, “Beta”)
disabled? boolean Not selectable (plan, region or availability)