AI & AgentsPro

Model Select

Pick the model and how hard it should think, with context size and price at a glance.

Usage

Nova

The default model for code and design-system work.

Reasoning effort

Balanced — the default.

bash

npm install @wunderui/react

Then import what you need:

tsx

import { ModelSelect } from "@wunderui/react"

Quick answers at the lowest cost.

Nova

The default model for code and design-system work.

Reasoning effort

Quick answers, lowest cost.

The balanced default.

Nova

The default model for code and design-system work.

Reasoning effort

Balanced — the default.

Thinks longer on hard problems.

Nova

The default model for code and design-system work.

Reasoning effort

Thinks longer on hard problems and costs more.

How the component is used inside real screens — the same compositions as the Usage section of the Figma page.

The card that opens from the model name in the top bar: pick a model and how long it should think.

Nova· medium effort

Nova

The default model for code and design-system work.

Reasoning effort

Balanced — the default.

Prop	Type	Default
models	{ id; name; meta?; description?; specs?: [string, string][] }[]	—
value / defaultValue / onValueChange	string	first model
effort / defaultEffort / onEffortChange	"low" \| "medium" \| "high"	"medium"