Model Wheel
An endless drum in CSS 3D: rows bend away toward the edges and fade, and the one in the middle lands on a raised band in full ink. It spins a lap on first view, turns by drag, scroll, click or keys, and can cycle through names on its own as a hero piece.
The decision inside it
It always lands on a row, and says so
A throw is projected forward, rounded to the nearest row and carried there by a spring, so it never rests half a row off. Then it calls onLand(name, index), which makes it a real picker or slot reveal, not only decoration.
When to use it
Use Model Wheel for names on a turning drum that always lands on a row: a picker with onLand, a slot-style reveal, or a hero piece that cycles on its own. For a real model menu with prices use Model Picker.
Installation
How you get it
Paste this into Claude Code, Cursor, Codex or any coding agent. It installs the file and uses it as it is, instead of writing a new one.
Use Layro's Model Wheel for this.
Install it: npx shadcn@latest add @layro/model-wheel
(the @layro registry is set up in components.json, with LAYRO_KEY in .env.local)
Import it from @/components/ui/model-wheel.
Do not rewrite or restyle it. Pass my data through its props
and keep its built-in states.For the full brief with every prop and the mistakes assistants usually make, use Copy prompt above. Pro components install through the @layro registry with your CLI token: see the Namespaced tab.
Usage
import { ModelWheel } from "@/components/ui/model-wheel";
export function ModelReveal({ choose }: { choose: (name: string) => void }) {
return <ModelWheel items={["Swift", "Balanced", "Deep", "Vision", "Scribe"]} defaultValue="Balanced" onLand={(name) => choose(name)} />;
}API reference
“Copy prompt” above puts a full brief on your clipboard — install command, dependencies, props, and the mistakes an assistant usually makes with this component.
Props
Read from the component’s own TypeScript interface when the site is built, so this table cannot drift from the file you install.
| Prop | Type | Notes |
|---|---|---|
itemsrequired | ModelWheelItem[] | — |
value | string | The name to land on. Changing it turns the wheel there. |
defaultValue | string | The name it starts on, uncontrolled. Default: the first item. |
onLand | (name: string, index: number) => void | Called each time the wheel comes to rest on a row. |
autoSpin | boolean | Spin a lap or two on first view, then settle. Default true. |
spinKey | number | Change this number to spin (with laps) to the current `value` again. |
cycle | number | Land on a new random row every N ms while on screen and not held. |
rowHeight | number | Row height in px. Default 44. |
reach | number | Rows visible above and below the middle, roughly. Default 3. |
interactive | boolean | Drag, scroll, click and keys. Default true. |
label | string | Names the listbox. Default "Model". |
Dependencies
npm packages
clsxframer-motiontailwind-mergeLayro foundations, installed alongside it
layro-themeStates
All of them are drawn by the component. None is left for you to design.
- Spinning
- Landed
- Dragging
- Cycling
- Reduced motion
Accessibility
- Keyboard reachable throughout, in visual order
- Focus trapped in overlays, Escape closes them
- Focus returns to whatever opened it
- Live regions announce what changed, not that something did
- Honours prefers-reduced-motion
Responsive behavior
- Sizes to its container, not the viewport
- Usable from 320px up
- Pointer-based interaction, so trackpad and touch both work
- No hover-only affordances
Lifetime access
Every component, and everything we ship next.
- All 232 components, source included
- Every template, and everything released after you buy
- shadcn CLI or download — React 18/19, Tailwind v4
- One payment. No subscription.
More in CreativeAll Creative components
Typewriter
Text that types itself out, or arrives word by word, and can cycle through several lines.
Flip Words
One word in a headline that rotates through a list, with the line resizing smoothly.
Gradient Text
Words filled with a gradient: still, slowly flowing, or swept once when they come into view.
Grid & Dot Background
A quiet line, dot or cross pattern behind a section, fading out toward the edges.
Aurora Background
Slow ribbons of soft colour behind a hero, like light moving in the sky.
Spotlight Card
A card with a soft light that follows the pointer and lights the nearest edge.