Segmented Control
NewInstallation
npx shadcn@latest add https://uibrik.com/r/segmented-control.jsonInstall the packages
npm install motionAdd the cn helper
Imports
cnfrom@/lib/utils, whichshadcn initcreates. Add it by hand without shadcn.Copy the source into your project
components/uibrik/segmented-control/segmented-control.tsx"use client"; import { useLayoutEffect, useRef, useState, type KeyboardEvent, type PointerEvent, type ReactNode } from "react"; import { MotionConfig, motion } from "motion/react"; import { cn } from "@/lib/utils"; // Segmented control. One pill slides between segments on a spring, measured // from the segments themselves so labels of any width line up. Like the iOS // control, pressing the selected segment gives the pill a small squish, and // dragging it scrubs across the others: the pill follows the pointer from // segment to segment and the choice is made on release. Pressing any other // segment selects it straight away. // // It's a radio group: Tab lands on the selected segment, arrows move the // choice, Home and End jump to the ends. export type SegmentedOption = string | { value: string; label: ReactNode; icon?: ReactNode; disabled?: boolean }; export type SegmentedControlProps = { options: readonly SegmentedOption[]; /** Selected value (controlled). Pair with `onChange`. */ value?: string; /** Selected value on mount (uncontrolled). Defaults to the first option. */ defaultValue?: string;
Adds the files to
components/uibrik/segmented-control and installs motion. With the @uibrik namespace set up: npx shadcn@latest add @uibrik/segmented-control.Props
SegmentedControl- size
- Type "sm" | "md" | "lg"
- "md"
- Height and text size.
- equalWidth
- Type boolean
- false
- Give every segment the width of the widest one.
- draggable
- Type boolean
- true
- Press the selected segment and drag to scrub across the others.
- duration
- Type number
- 0.35
- How long the pill takes to slide.
- optionsrequired
- Type (string | { value; label; icon?; disabled? })[]
- –
- Segments in order.
- value / onChange
- Type string / (value) => void
- –
- Controlled selection.
- defaultValue
- Type string
- –
- Selection on mount when uncontrolled. Defaults to the first option.
- label
- Type string
- –
- Names the group for screen readers.
- className
- Type string
- –
- Classes for the bar.
