A single-select segmented control (toggle group) with a frosted glass track, gradient rim glow, and a spring-animated sliding thumb that follows the active option.
"use client";
import { HaloSegmented } from "@/components/ui/halo-segmented";
import { useState } from "react";
export default function HaloSegmentedDemo() {
const [segment, setSegment] = useState("week");
return (
<main className="flex w-full flex-col items-center justify-center gap-16">
<div className="w-full max-w-2xl space-y-10">
<section className="space-y-3">
<h2 className="font-semibold text-foreground text-lg tracking-tight">
Segmented control
</h2>
<p className="text-pretty text-muted-foreground text-sm">
Single-select control: one option is active at a time, with a
spring-animated thumb that slides between segments.
</p>
<HaloSegmented
items={[
{ label: "Day", value: "day" },
{ label: "Week", value: "week" },
{ label: "Month", value: "month" },
]}
onValueChange={setSegment}
value={segment}
/>
<p className="text-muted-foreground text-xs tabular-nums">
Selected: {segment}
</p>
</section>
</div>
</main>
);
}
Part of cult ui — browse the full library on 21st.dev.