Segmented Control

An iOS-style segmented control that allows users to switch between a set of mutually exclusive options. Features a smooth animated indicator that slides between segments.

Installation

npx @tapcn/cli add segmented-control

Or using shadcn directly:

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

Usage

import { SegmentedControl } from '~/components/ui/segmented-control';
import * as React from 'react';

export function SegmentedControlExample() {
  const [selectedIndex, setSelectedIndex] = React.useState(0);

  return (
    <SegmentedControl
      segments={['Daily', 'Weekly', 'Monthly']}
      selectedIndex={selectedIndex}
      onIndexChange={setSelectedIndex}
    />
  );
}

Props

Prop	Type	Default	Description
`segments`	`string[]`	-	Array of segment labels to display.
`selectedIndex`	`number`	-	The index of the currently selected segment.
`onIndexChange`	`(index: number) => void`	-	Callback fired when a segment is selected.
`className`	`string`	-	Additional CSS classes for the container.

Dependencies

react-native-reanimated

Segmented Control

Segmented Control

Installation

Usage

Props

Dependencies

On this page