Sections

Get Started

Animations

Segmented Control

A tab-based segmented control component with animated transitions built on Radix UI Tabs.

import {
  SegmentedControl,
  SegmentedControlContent,
  SegmentedControlList,
  SegmentedControlTrigger,
} from "@/components/ui/segmented-control"

export function SegmentedControlDemo() {
  return (
    <SegmentedControl defaultValue="account" className="w-[400px]">
      <SegmentedControlList>
        <SegmentedControlTrigger value="account">
          Account
        </SegmentedControlTrigger>
        <SegmentedControlTrigger value="password">
          Password
        </SegmentedControlTrigger>
        <SegmentedControlTrigger value="settings">
          Settings
        </SegmentedControlTrigger>
      </SegmentedControlList>
      <SegmentedControlContent value="account" className="mt-4">
        Make changes to your account here.
      </SegmentedControlContent>
      <SegmentedControlContent value="password" className="mt-4">
        Change your password here.
      </SegmentedControlContent>
      <SegmentedControlContent value="settings" className="mt-4">
        Update your settings here.
      </SegmentedControlContent>
    </SegmentedControl>
  )
}

Installation


pnpm dlx pitsi@latest add segmented-control

Usage

import {
  SegmentedControl,
  SegmentedControlContent,
  SegmentedControlList,
  SegmentedControlTrigger,
} from "@/components/ui/segmented-control"

<SegmentedControl defaultValue="tab1">
  <SegmentedControlList>
    <SegmentedControlTrigger value="tab1">Tab 1</SegmentedControlTrigger>
    <SegmentedControlTrigger value="tab2">Tab 2</SegmentedControlTrigger>
    <SegmentedControlTrigger value="tab3">Tab 3</SegmentedControlTrigger>
  </SegmentedControlList>
  <SegmentedControlContent value="tab1">
    Content for tab 1
  </SegmentedControlContent>
  <SegmentedControlContent value="tab2">
    Content for tab 2
  </SegmentedControlContent>
  <SegmentedControlContent value="tab3">
    Content for tab 3
  </SegmentedControlContent>
</SegmentedControl>

Examples

Basic Segmented Control

import {
  SegmentedControl,
  SegmentedControlContent,
  SegmentedControlList,
  SegmentedControlTrigger,
} from "@/components/ui/segmented-control"

export function SegmentedControlDemo() {
  return (
    <SegmentedControl defaultValue="account" className="w-[400px]">
      <SegmentedControlList>
        <SegmentedControlTrigger value="account">
          Account
        </SegmentedControlTrigger>
        <SegmentedControlTrigger value="password">
          Password
        </SegmentedControlTrigger>
        <SegmentedControlTrigger value="settings">
          Settings
        </SegmentedControlTrigger>
      </SegmentedControlList>
      <SegmentedControlContent value="account" className="mt-4">
        Make changes to your account here.
      </SegmentedControlContent>
      <SegmentedControlContent value="password" className="mt-4">
        Change your password here.
      </SegmentedControlContent>
      <SegmentedControlContent value="settings" className="mt-4">
        Update your settings here.
      </SegmentedControlContent>
    </SegmentedControl>
  )
}

Custom Styling

"use client"

import {
  SegmentedControl,
  SegmentedControlList,
  SegmentedControlTrigger,
} from "@/components/ui/segmented-control"

export function SegmentedControlCustom() {
  return (
    <SegmentedControl defaultValue="week">
      <SegmentedControlList
        className="w-fit rounded-full"
        floatingBgClassName="rounded-full"
      >
        <SegmentedControlTrigger value="day">Day</SegmentedControlTrigger>
        <SegmentedControlTrigger value="week">Week</SegmentedControlTrigger>
        <SegmentedControlTrigger value="month">Month</SegmentedControlTrigger>
        <SegmentedControlTrigger value="year">Year</SegmentedControlTrigger>
      </SegmentedControlList>
    </SegmentedControl>
  )
}

With Icons

import { Bell, Settings, User } from "lucide-react"
 
;<SegmentedControl defaultValue="account">
  <SegmentedControlList>
    <SegmentedControlTrigger value="account">
      <User className="h-4 w-4" />
      Account
    </SegmentedControlTrigger>
    <SegmentedControlTrigger value="settings">
      <Settings className="h-4 w-4" />
      Settings
    </SegmentedControlTrigger>
    <SegmentedControlTrigger value="notifications">
      <Bell className="h-4 w-4" />
      Notifications
    </SegmentedControlTrigger>
  </SegmentedControlList>
</SegmentedControl>

Controlled

const [value, setValue] = React.useState("tab1")
 
<SegmentedControl value={value} onValueChange={setValue}>
  <SegmentedControlList>
    <SegmentedControlTrigger value="tab1">Tab 1</SegmentedControlTrigger>
    <SegmentedControlTrigger value="tab2">Tab 2</SegmentedControlTrigger>
  </SegmentedControlList>
  <SegmentedControlContent value="tab1">
    Content 1
  </SegmentedControlContent>
  <SegmentedControlContent value="tab2">
    Content 2
  </SegmentedControlContent>
</SegmentedControl>

Components

SegmentedControl

The root component that manages the state of the segmented control.

SegmentedControlList

The container for the segmented control triggers. Features an animated floating background that slides to the active tab.

SegmentedControlTrigger

An individual tab trigger that users can click to switch between content.

SegmentedControlContent

The content area that displays when its corresponding trigger is active.

Props

SegmentedControl

Extends all props from Radix UI Tabs Root.

Prop	Type	Default	Description
`defaultValue`	`string`	-	The default active tab
`value`	`string`	-	The controlled active tab value
`onValueChange`	`(value: string) => void`	-	Callback when the active tab changes

SegmentedControlList

Extends all props from Radix UI Tabs List.

Prop	Type	Default	Description
`floatingBgClassName`	`string`	-	Custom classes for the floating background

SegmentedControlTrigger

Extends all props from Radix UI Tabs Trigger.

Prop	Type	Default	Description
`value`	`string`	-	The value that activates this tab

SegmentedControlContent

Extends all props from Radix UI Tabs Content.

Prop	Type	Default	Description
`value`	`string`	-	The value that shows this content

Features

Smooth animated transitions between tabs
Floating background indicator that slides to active tab
Built on Radix UI Tabs for full accessibility
Keyboard navigation support
Flexible styling with custom classes
Supports icons and text content

Scroll Area Select

On This Page

Installation Usage Examples Basic Segmented Control Custom Styling With Icons Controlled Components SegmentedControl SegmentedControlList SegmentedControlTrigger SegmentedControlContent Props SegmentedControl SegmentedControlList SegmentedControlTrigger SegmentedControlContent Features

Sections

Get Started

Animations

Segmented Control

A tab-based segmented control component with animated transitions built on Radix UI Tabs.

Docs API Reference

import {
  SegmentedControl,
  SegmentedControlContent,
  SegmentedControlList,
  SegmentedControlTrigger,
} from "@/components/ui/segmented-control"

export function SegmentedControlDemo() {
  return (
    <SegmentedControl defaultValue="account" className="w-[400px]">
      <SegmentedControlList>
        <SegmentedControlTrigger value="account">
          Account
        </SegmentedControlTrigger>
        <SegmentedControlTrigger value="password">
          Password
        </SegmentedControlTrigger>
        <SegmentedControlTrigger value="settings">
          Settings
        </SegmentedControlTrigger>
      </SegmentedControlList>
      <SegmentedControlContent value="account" className="mt-4">
        Make changes to your account here.
      </SegmentedControlContent>
      <SegmentedControlContent value="password" className="mt-4">
        Change your password here.
      </SegmentedControlContent>
      <SegmentedControlContent value="settings" className="mt-4">
        Update your settings here.
      </SegmentedControlContent>
    </SegmentedControl>
  )
}

Installation


pnpm dlx pitsi@latest add segmented-control

Usage

import {
  SegmentedControl,
  SegmentedControlContent,
  SegmentedControlList,
  SegmentedControlTrigger,
} from "@/components/ui/segmented-control"

<SegmentedControl defaultValue="tab1">
  <SegmentedControlList>
    <SegmentedControlTrigger value="tab1">Tab 1</SegmentedControlTrigger>
    <SegmentedControlTrigger value="tab2">Tab 2</SegmentedControlTrigger>
    <SegmentedControlTrigger value="tab3">Tab 3</SegmentedControlTrigger>
  </SegmentedControlList>
  <SegmentedControlContent value="tab1">
    Content for tab 1
  </SegmentedControlContent>
  <SegmentedControlContent value="tab2">
    Content for tab 2
  </SegmentedControlContent>
  <SegmentedControlContent value="tab3">
    Content for tab 3
  </SegmentedControlContent>
</SegmentedControl>

Examples

Basic Segmented Control

import {
  SegmentedControl,
  SegmentedControlContent,
  SegmentedControlList,
  SegmentedControlTrigger,
} from "@/components/ui/segmented-control"

export function SegmentedControlDemo() {
  return (
    <SegmentedControl defaultValue="account" className="w-[400px]">
      <SegmentedControlList>
        <SegmentedControlTrigger value="account">
          Account
        </SegmentedControlTrigger>
        <SegmentedControlTrigger value="password">
          Password
        </SegmentedControlTrigger>
        <SegmentedControlTrigger value="settings">
          Settings
        </SegmentedControlTrigger>
      </SegmentedControlList>
      <SegmentedControlContent value="account" className="mt-4">
        Make changes to your account here.
      </SegmentedControlContent>
      <SegmentedControlContent value="password" className="mt-4">
        Change your password here.
      </SegmentedControlContent>
      <SegmentedControlContent value="settings" className="mt-4">
        Update your settings here.
      </SegmentedControlContent>
    </SegmentedControl>
  )
}

Custom Styling

"use client"

import {
  SegmentedControl,
  SegmentedControlList,
  SegmentedControlTrigger,
} from "@/components/ui/segmented-control"

export function SegmentedControlCustom() {
  return (
    <SegmentedControl defaultValue="week">
      <SegmentedControlList
        className="w-fit rounded-full"
        floatingBgClassName="rounded-full"
      >
        <SegmentedControlTrigger value="day">Day</SegmentedControlTrigger>
        <SegmentedControlTrigger value="week">Week</SegmentedControlTrigger>
        <SegmentedControlTrigger value="month">Month</SegmentedControlTrigger>
        <SegmentedControlTrigger value="year">Year</SegmentedControlTrigger>
      </SegmentedControlList>
    </SegmentedControl>
  )
}

With Icons

import { Bell, Settings, User } from "lucide-react"
 
;<SegmentedControl defaultValue="account">
  <SegmentedControlList>
    <SegmentedControlTrigger value="account">
      <User className="h-4 w-4" />
      Account
    </SegmentedControlTrigger>
    <SegmentedControlTrigger value="settings">
      <Settings className="h-4 w-4" />
      Settings
    </SegmentedControlTrigger>
    <SegmentedControlTrigger value="notifications">
      <Bell className="h-4 w-4" />
      Notifications
    </SegmentedControlTrigger>
  </SegmentedControlList>
</SegmentedControl>

Controlled

const [value, setValue] = React.useState("tab1")
 
<SegmentedControl value={value} onValueChange={setValue}>
  <SegmentedControlList>
    <SegmentedControlTrigger value="tab1">Tab 1</SegmentedControlTrigger>
    <SegmentedControlTrigger value="tab2">Tab 2</SegmentedControlTrigger>
  </SegmentedControlList>
  <SegmentedControlContent value="tab1">
    Content 1
  </SegmentedControlContent>
  <SegmentedControlContent value="tab2">
    Content 2
  </SegmentedControlContent>
</SegmentedControl>

Components

SegmentedControl

The root component that manages the state of the segmented control.

SegmentedControlList

The container for the segmented control triggers. Features an animated floating background that slides to the active tab.

SegmentedControlTrigger

An individual tab trigger that users can click to switch between content.

SegmentedControlContent

The content area that displays when its corresponding trigger is active.

Props

SegmentedControl

Extends all props from Radix UI Tabs Root.

Prop	Type	Default	Description
`defaultValue`	`string`	-	The default active tab
`value`	`string`	-	The controlled active tab value
`onValueChange`	`(value: string) => void`	-	Callback when the active tab changes

SegmentedControlList

Extends all props from Radix UI Tabs List.

Prop	Type	Default	Description
`floatingBgClassName`	`string`	-	Custom classes for the floating background

SegmentedControlTrigger

Extends all props from Radix UI Tabs Trigger.

Prop	Type	Default	Description
`value`	`string`	-	The value that activates this tab

SegmentedControlContent

Extends all props from Radix UI Tabs Content.

Prop	Type	Default	Description
`value`	`string`	-	The value that shows this content

Features

Smooth animated transitions between tabs
Floating background indicator that slides to active tab
Built on Radix UI Tabs for full accessibility
Keyboard navigation support
Flexible styling with custom classes
Supports icons and text content

Scroll Area Select

On This Page