Model Picker

Component 27

About

A dark cockpit-style model and reasoning-effort picker with a three-model matrix, five effort levels, and an animated ULTRA lever.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Model Picker to your project and fits it to your theme.

Code

How Model Picker is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import ModelPicker from "@/components/ui/model-picker";

export default function ModelPickerDemo() {
  return (
    <main
      style={{
        minHeight: "100vh",
        display: "grid",
        placeItems: "center",
        padding: 16,
        boxSizing: "border-box",
        background: "#0F0F0F",
      }}
    >
      <div style={{ width: "min(500px, calc(100vw - 32px))" }}>
        <ModelPicker />
      </div>
    </main>
  );
}