ThinkingSelect

Reasoning-effort selector for agent chat input bars.

ThinkingSelect sets how hard the model thinks: Off, Low, Med, High, or X-High. An elastic slider with rubber-band drag and spring snap; pixel sparkles glint inside the fill, paced per level — none at Off, then progressively denser and quicker from Low through X-High. Sized to sit beside ModelSelect in a chat input bar; the selection maps onto the OpenAI-compatible reasoning_effort parameter.

"use client";

import { useState } from "react";

import { defaultEffort } from "./fixtures";
import { ThinkingSelect } from "./thinking-select";
import type { ThinkingEffort } from "./thinking-select";

export const ThinkingSelectDemo = () => {
  const [effort, setEffort] = useState<ThinkingEffort>(defaultEffort);

  return (
    <div className="flex w-72 flex-col gap-3">
      <ThinkingSelect onValueChange={setEffort} size="lg" value={effort} />
      <ThinkingSelect onValueChange={setEffort} size="md" value={effort} />
      <ThinkingSelect onValueChange={setEffort} size="sm" value={effort} />
    </div>
  );
};

export default ThinkingSelectDemo;

Install

npx shadcn@latest add https://ui.neon.com/r/thinking-select.json

Usage

import { ThinkingSelect } from "@/components/neon-ui/thinking-select";

<ThinkingSelect value={effort} onValueChange={setEffort} />;

Wiring to Neon

Forward the selection to a Neon AI Gateway chat call; omit the parameter when thinking is off:

await fetch(`${gatewayUrl}/v1/chat/completions`, {
  method: "POST",
  headers: { Authorization: `Bearer ${token}` },
  body: JSON.stringify({
    model: "neon/claude-sonnet-4-6",
    messages,
    ...(effort === "off" ? {} : { reasoning_effort: effort }),
  }),
});

Props

PropType

Controlled effort level.

Uncontrolled initial effort level.

Default"off"

onValueChange?(value: ThinkingEffort) => void

Called with the newly selected effort.

Type(value: ThinkingEffort) => void

disabled?boolean

Disable the whole control.

Typeboolean

Defaultfalse

size?"sm" | "md" | "lg"

Track size: compact, default, or roomy.

Type"sm" | "md" | "lg"

Default"md"

Accessibility

The slider is a native range input semantically: arrow keys step between levels, Home/End jump to the ends. The intensity bars are decorative (aria-hidden), and all elastic/pulse motion is disabled under prefers-reduced-motion.

Credits

The elastic track is built on Chánh Đại’s Elastic Slider (MIT), lightly patched for spring-snap on release and Neon styling.