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.
"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>
);
}