Segmented Control

A white pill slides between segments.

Installation

CLI

npx shadcn@latest add https://hantui-theta.vercel.app/r/segmented-control.json

Manual

Install the dependencies

npm install clsx motion radix-ui tailwind-merge

Add the shared helpers

Components use cn() from lib/utils.ts and the motion tokens below. See Installation if you have not set them up yet.

lib/motion.ts

import type { Transition, Variants } from "motion/react";

/** Durations in seconds. */
export const duration = {
  instant: 0.1,
  quick: 0.18,
  base: 0.28,
  slow: 0.45,
} as const;

/** Cubic-bezier curves. */
export const ease = {
  /** Entering, UI response. */
  out: [0.22, 1, 0.36, 1],
  /** Moving on screen. */
  inOut: [0.65, 0, 0.35, 1],
  /** Sheets and the mobile menu. */
  drawer: [0.32, 0.72, 0, 1],
} as const;

/** Everyday UI: presses, icon swaps, popovers and modals. Exits run at `exitFactor` of the enter. */
export const ui = {
  press: { scale: 0.96, duration: 0.12 },
  icon: { type: "spring", duration: 0.3, bounce: 0 },
  popover: { duration: 0.18, ease: ease.out },
  modal: { duration: 0.24, ease: ease.out },
  exitFactor: 0.6,
} as const;

/** Once-per-visit motion on the landing page: hero letters, the reel and the afterimage. */
export const kinetic = {
  heroLetter: { duration: 0.6, ease: ease.out },
  /** Delay per letter, eased so the wave slows toward the end. */
  heroStep: 0.035,
  reelSwap: { type: "spring", duration: 0.5, bounce: 0.1 },
  /** Two afterimages: lag in seconds and opacity of each. */
  ghost: { lag: [0.04, 0.09], opacity: [0.14, 0.06] },
} as const;

/** Spring presets. */
export const spring = {
  snappy: { type: "spring", stiffness: 500, damping: 30 },
  smooth: { type: "spring", stiffness: 260, damping: 26 },
  bouncy: { type: "spring", stiffness: 300, damping: 15 },
} as const satisfies Record<string, Transition>;

/** Stagger between siblings, in seconds (0.03–0.06). */
export const stagger = {
  tight: 0.03,
  base: 0.045,
  loose: 0.06,
} as const;

/** Blur + fade + y-offset. Falls back to a plain fade under reduced motion. */
export function enterVariants(reduceMotion?: boolean | null, y = 8): Variants {
  if (reduceMotion) {
    return {
      hidden: { opacity: 0 },
      visible: { opacity: 1, transition: { duration: duration.base } },
      exit: { opacity: 0, transition: { duration: duration.quick } },
    };
  }
  return {
    hidden: { opacity: 0, y, filter: "blur(4px)" },
    visible: {
      opacity: 1,
      y: 0,
      filter: "blur(0px)",
      transition: { duration: duration.base, ease: ease.out },
    },
    exit: {
      opacity: 0,
      y: -y / 2,
      filter: "blur(4px)",
      transition: { duration: duration.quick, ease: ease.out },
    },
  };
}

/** Scale 0.96 → 1 for popovers, menus and dialogs. */
export function overlayVariants(reduceMotion?: boolean | null): Variants {
  if (reduceMotion) {
    return {
      hidden: { opacity: 0 },
      visible: { opacity: 1, transition: { duration: duration.quick } },
      exit: { opacity: 0, transition: { duration: duration.instant } },
    };
  }
  return {
    hidden: { opacity: 0, scale: 0.96, filter: "blur(2px)" },
    visible: {
      opacity: 1,
      scale: 1,
      filter: "blur(0px)",
      transition: { duration: duration.quick, ease: ease.out },
    },
    exit: {
      opacity: 0,
      scale: 0.96,
      filter: "blur(2px)",
      transition: { duration: duration.instant + 0.02, ease: ease.out },
    },
  };
}

/** Parent variants that stagger their children in. */
export function staggerVariants(gap: number = stagger.base, delayChildren = 0): Variants {
  return {
    hidden: {},
    visible: { transition: { staggerChildren: gap, delayChildren } },
    exit: { transition: { staggerChildren: gap / 2, staggerDirection: -1 } },
  };
}

Copy the source

components/ui/segmented-control/segmented-control.tsx

"use client";

import { useId, useState, type ComponentProps, type ReactNode } from "react";
import { LayoutGroup, motion, useReducedMotion } from "motion/react";
import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
import { cn } from "@/lib/utils";
import { spring } from "@/lib/motion";

export interface SegmentedControlOption {
  /** Value reported when the segment is chosen. */
  value: string;
  /** Visible label. Omit it for icon-only segments and pass aria-label instead. */
  label?: ReactNode;
  /** Icon shown before the label. */
  icon?: ReactNode;
  /** Accessible name for icon-only segments. */
  "aria-label"?: string;
  /** Prevents choosing this segment. */
  disabled?: boolean;
}

export interface SegmentedControlProps
  extends Omit<
    ComponentProps<typeof RadioGroupPrimitive.Root>,
    "value" | "defaultValue" | "onValueChange" | "asChild" | "children" | "orientation"
  > {
  /** The segments, in order. */
  options: SegmentedControlOption[];
  /** Controlled selected value. */
  value?: string;
  /** Initially selected value when uncontrolled. @default the first option */
  defaultValue?: string;
  /** Called with the newly selected value. */
  onValueChange?: (value: string) => void;
  /** Control height. @default "md" */
  size?: "sm" | "md";
  /** Stretch to the container width with equal segments. @default false */
  fullWidth?: boolean;
}

export function SegmentedControl({
  options,
  value,
  defaultValue,
  onValueChange,
  size = "md",
  fullWidth = false,
  className,
  ...props
}: SegmentedControlProps) {
  const [internal, setInternal] = useState(defaultValue ?? options[0]?.value);
  const selected = value ?? internal;
  const reduceMotion = useReducedMotion();
  const groupId = useId();

  return (
    <RadioGroupPrimitive.Root
      orientation="horizontal"
      value={selected}
      onValueChange={(next) => {
        if (value === undefined) setInternal(next);
        onValueChange?.(next);
      }}
      className={cn(
        "items-center gap-0.5 rounded-[10px] bg-muted p-[3px]",
        fullWidth ? "flex w-full" : "inline-flex",
        className,
      )}
      {...props}
    >
      <LayoutGroup id={groupId}>
        {options.map((option) => {
          const active = option.value === selected;
          const iconOnly = !option.label;
          return (
            <RadioGroupPrimitive.Item
              key={option.value}
              value={option.value}
              disabled={option.disabled}
              aria-label={option["aria-label"]}
              className={cn(
                "relative inline-flex cursor-pointer items-center justify-center gap-1.5 rounded-[7px] font-medium whitespace-nowrap outline-none select-none",
                "transition-colors duration-150 focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-40",
                "[&_svg]:size-4 [&_svg]:shrink-0",
                // Hit area grows vertically only, so neighbouring segments never overlap.
                "after:absolute after:inset-x-0 after:content-['']",
                size === "sm" ? "h-7 text-[13px] after:-inset-y-1.5" : "h-8 text-sm after:-inset-y-1",
                iconOnly ? (size === "sm" ? "w-8" : "w-9") : size === "sm" ? "px-2.5" : "px-3.5",
                fullWidth && "flex-1",
                active ? "text-foreground" : "text-foreground/65 hover:text-foreground",
              )}
            >
              {active ? (
                <motion.span
                  layoutId="segment-pill"
                  aria-hidden="true"
                  className="absolute inset-0 rounded-[7px] bg-background shadow-[0_0_0_1px_rgb(0_0_0/0.04),0_1px_2px_rgb(0_0_0/0.08),0_2px_6px_-2px_rgb(0_0_0/0.08)]"
                  transition={reduceMotion ? { duration: 0 } : spring.snappy}
                />
              ) : null}
              <span className="relative inline-flex items-center gap-1.5">
                {option.icon}
                {option.label}
              </span>
            </RadioGroupPrimitive.Item>
          );
        })}
      </LayoutGroup>
    </RadioGroupPrimitive.Root>
  );
}

Usage

import { SegmentedControl } from "@/components/ui/segmented-control/segmented-control";

export function RangePicker() {
  const [range, setRange] = useState("week");
  return (
    <SegmentedControl
      aria-label="Date range"
      value={range}
      onValueChange={setRange}
      options={[
        { value: "day", label: "Day" },
        { value: "week", label: "Week" },
        { value: "month", label: "Month" },
      ]}
    />
  );
}

API reference

Prop	Type	Default	Description
`options*`	`SegmentedControlOption[]`	–	The segments, in order.
`value`	`string`	–	Controlled selected value.
`defaultValue`	`string`	`the first option`	Initially selected value when uncontrolled.
`onValueChange`	`(value: string) => void`	–	Called with the newly selected value.
`size`	`"sm" \| "md"`	`"md"`	Control height.
`fullWidth`	`boolean`	`false`	Stretch to the container width with equal segments.

Also accepts every prop of Radix RadioGroup.Root, including className and disabled.

Use a segmented control for a handful of mutually exclusive views. For more than five options, prefer a select.

Accessibility

Built on Radix RadioGroup: one tab stop, and the arrow keys move the selection, as users expect from a segmented control.
Icon-only segments need an aria-label in their option; the icon itself should be aria-hidden.
Give the control an aria-label that names what it changes, e.g. "Date range".
With reduced motion enabled, the pill jumps instead of sliding.

Installation#

CLI