Arc picker

When to use #

Use it for

A few ordered values such as a rating, level or intensity.
A playful alternative to a slider.

Skip it when

Precision matters; use a slider or number field.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/arc-picker.json

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx

import { useState } from "react"
import { ArcPicker } from "@/components/ui/arc-picker"

export function IntensityArc() {
  const [level, setLevel] = useState("medium");
  return (
    <ArcPicker
      label="Intensity"
      options={[
        { value: "low", label: "Low" },
        { value: "medium", label: "Medium" },
        { value: "high", label: "High" },
        { value: "max", label: "Max" },
      ]}
      value={level}
      onValueChange={setLevel}
    />
  );
}

API reference #

ArcPicker

component

PropTypeDefault

label *string—

options *readonly ArcOption[]—

valuestring—

defaultValuestring—

onValueChange((value: string) => void)—

namestring—

classNamestring—

It exposes listbox and option semantics, with aria-label, aria-activedescendant, aria-hidden and aria-selected kept in step with state.

KeyBehaviour

↓Moves to the next item or value.

↑Moves to the previous item or value.

HomeJumps to the first item or the minimum.

EndJumps to the last item or the maximum.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.