Arc Picker

Component 46

About

A radial, curved text picker you drag, scroll or arrow-key through to choose one option from a list, with momentum and a bracket frame that highlights the current choice.

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

Code

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

Usage.tsx

"use client";

import ArcPicker from "@/components/ui/arc-picker";

const OPTIONS = [
  { value: "first-light", label: "First light" },
  { value: "dawn", label: "Dawn" },
  { value: "daybreak", label: "Daybreak" },
  { value: "sunrise", label: "Sunrise" },
  { value: "early-morning", label: "Early morning" },
  { value: "morning", label: "Morning" },
  { value: "late-morning", label: "Late morning" },
  { value: "midday", label: "Midday" },
  { value: "noon", label: "Noon" },
  { value: "afternoon", label: "Afternoon" },
  { value: "golden-hour", label: "Golden hour" },
  { value: "sunset", label: "Sunset" },
  { value: "blue-hour", label: "Blue hour" },
  { value: "dusk", label: "Dusk" },
  { value: "twilight", label: "Twilight" },
  { value: "evening", label: "Evening" },
  { value: "nightfall", label: "Nightfall" },
  { value: "night", label: "Night" },
  { value: "late-night", label: "Late night" },
  { value: "midnight", label: "Midnight" },
  { value: "deep-night", label: "Deep night" },
  { value: "starlight", label: "Starlight" },
];

export default function ArcPickerDemo() {
  return (
    <div className="flex h-screen w-full items-center justify-center">
      <ArcPicker
        options={OPTIONS}
        defaultValue="golden-hour"
        aria-label="Time of day"
        side="right"
        radius={260}
        visibleCount={9}
        itemHeight={48}
        className="max-w-xs"
      />
    </div>
  );
}