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.
- Context window
- 200k tokens
- Input
- $3.00 / 1M tokens
- Output
- $15.00 / 1M tokens
- Speed
- Fast
Reasoning effort
Balanced — the default.
Installation
npm install @wunderui/reactThen import what you need:
import { ModelSelect } from "@wunderui/react"Examples
Low effort
Quick answers at the lowest cost.
Nova
The default model for code and design-system work.
- Context window
- 200k tokens
- Input
- $3.00 / 1M tokens
- Output
- $15.00 / 1M tokens
- Speed
- Fast
Reasoning effort
Quick answers, lowest cost.
Medium effort
The balanced default.
Nova
The default model for code and design-system work.
- Context window
- 200k tokens
- Input
- $3.00 / 1M tokens
- Output
- $15.00 / 1M tokens
- Speed
- Fast
Reasoning effort
Balanced — the default.
High effort
Thinks longer on hard problems.
Nova
The default model for code and design-system work.
- Context window
- 200k tokens
- Input
- $3.00 / 1M tokens
- Output
- $15.00 / 1M tokens
- Speed
- Fast
Reasoning effort
Thinks longer on hard problems and costs more.
In context
How the component is used inside real screens — the same compositions as the Usage section of the Figma page.
Model, effort and price
The card that opens from the model name in the top bar: pick a model and how long it should think.
Nova
The default model for code and design-system work.
- Context window
- 200k tokens
- Input
- $3.00 / 1M tokens
- Output
- $15.00 / 1M tokens
- Speed
- Fast
Reasoning effort
Balanced — the default.
API Reference
| Prop | Type | Default |
|---|---|---|
| models | { id; name; meta?; description?; specs?: [string, string][] }[] | — |
| value / defaultValue / onValueChange | string | first model |
| effort / defaultEffort / onEffortChange | "low" | "medium" | "high" | "medium" |