Halo Toggle Group

Segmented single-select control with frosted track, gradient rim, and spring-driven sliding thumb (aligned with Halo Button)

byjordan from Cult UI

Installation

terminal

pnpm dlx layro-cli add @nolly-studio/halo-toggle-group

npx layro-cli add @nolly-studio/halo-toggle-group

npx layro-cli add @nolly-studio/halo-toggle-group

bunx layro-cli add @nolly-studio/halo-toggle-group

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client"

/**
 * Segmented control (single-select toggle group) aligned with `HaloButtonPolished`:
 * frosted track, gradient rim, sliding thumb using the same layout spring as the button.
 */
import {
  useCallback,
  useLayoutEffect,
  useMemo,
  useRef,
  useState,
  type ReactNode,
} from "react"