Halo Segmented

Component

About

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.

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

Code

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

Usage.tsx

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