Tick Slider

Labeled-tick slider with a primary fill, a value pill in the header, and the active tick bolded.

Friendly
FormalNeutralFriendlyPlayful

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use
import { Form25 } from "@/components/beste/piece/form25";

<Form25
  label="Tone of voice"
  ticks={[
    "Formal",
    "Neutral",
    "Friendly",
    "Playful"
  ]}
  tickIndex={2}
  value="Friendly"
/>