Halo Toggle Group

Component 18

About

A single-select segmented control with a frosted translucent 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 Toggle Group to your project and fits it to your theme.

Code

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

Usage.tsx

"use client";

import { HaloToggleGroup } from "@/components/ui/halo-toggle-group";
import { useState } from "react";

export default function HaloToggleGroupDemo() {
  const [segment, setSegment] = useState("week");
  return (
    <div>
      <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 toggle group with a spring-driven thumb (same constants
          as <code className="text-foreground">HaloButton</code>
          ).
        </p>
        <HaloToggleGroup
          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>
  );
}