Skip to content

NewMCP server for your coding agent. Set it up ›

Nexus UI
Get Pro

Model Picker, animated React component

A model picker for AI products in one quiet pill. Open it for featured models with a one-line note each, an Effort submenu for models that reason, and More models grouped by provider. Choosing closes the menu, the pill springs to the new name's width, and a summary of context, prices and effort crossfades underneath. Effort snaps to the nearest level the new model accepts. Submenus become pages on phones, and it is fully keyboard operable: arrows, Right for a submenu, Enter to choose, Escape to close, and a letter to jump.

  • Pro
  • AI Components
  • Hover

Props

PropTypeDefaultWhat it does
modelsPickerModel[]—The catalog: id, name, provider, blurb, description, context, price?, effort?. The default is a sample with placeholder prices.
providersPickerProvider[]—Providers in the order More models groups them, each with a colour and a small glyph.
featuredstring[]—Model ids at the top of the menu. The rest go under More models.
value / defaultValuestring—The chosen model id, controlled or not.
onValueChange(id, model) => void—Called when someone picks a model.
effort / onEffortChange"low" | "medium" | "high" | "max"—Effort, controlled or not. Snaps to a level the model accepts.
defaultOpenbooleanfalseOpens the menu on first render.
showSummarybooleantrueThe description, context, prices and effort under the pill.
footnotestring—Line under the summary. Say here when prices are samples.
classNamestring—Classes for the wrapper.

Add it to your project

  1. 1

    Set up your project once

    You need a Next.js project with Tailwind CSS and the @/ import alias. In its root folder, run this once. It creates components.json and the cn() helper in src/lib/utils.ts:

    npx shadcn@latest init -d

    Starting from nothing? The Quick Start walks through the whole thing.

  2. 2

    Connect the registry with your API key

    Model Picker is a Pro item, so the CLI has to send your API key. Do this once per project:

    1. Create a key at nexus-ui.com/dashboard/api-key. Copy it straight away: it starts with nxs_ and is shown only once.
    2. In your project root, next to package.json, create a file named .env.local with this line, using your own key:
      NEXUS_API_KEY=nxs_your_key_here
    3. Open components.json and add this entry inside the outermost braces, next to "aliases". Leave {name} and ${NEXUS_API_KEY} exactly as written; the CLI fills them in:
      "registries": {
  "@nexus-labs": {
    "url": "https://www.nexus-ui.com/api/registry/{name}",
    "headers": {
      "Authorization": "Bearer ${NEXUS_API_KEY}"
    }
  }
}

How Model Picker works

A model picker for an AI product in one quiet pill. It opens a menu of featured models with a one line note each, an Effort submenu for models that reason, and More models grouped by provider. Choosing closes the menu, the pill springs to the new name's width, and the summary underneath crossfades to the new model. On phones the submenus open as pages inside the menu with a Back row.

The source, the install command and the build prompt come with Pro.

More ai components