Segment Group

Installation

bunnpmpnpmyarn
pnpm dlx shadcn@latest add https://shark.vini.one/r/segment-group.json

Usage

import {
  SegmentGroup,
  SegmentGroupIndicator,
  SegmentGroupItem,
  SegmentGroupItemText,
} from "@/components/ui/segment-group";

<SegmentGroup>
  <SegmentGroupIndicator />
  <SegmentGroupItem value="profile">
    <SegmentGroupItemText />
  </SegmentGroupItem>
  <SegmentGroupItem value="account">
    <SegmentGroupItemText />
  </SegmentGroupItem>
</SegmentGroup>

Controlled

Control the selected value programmatically with value and onValueChange props.

State

Disabled

Use the disabled prop to disable the entire segment group.

Disabled Item

Use the disabled prop on individual items to disable specific options.

Variant

Use the variant prop to change the visual variant of the segment group.

Default

Underline

Orientation

Use orientation to change the direction of the items.

Horizontal

Vertical

Vertical with Underline

Examples

Indicator on Hover

The indicator follows the mouse and returns to the selected item when not hovering.

Custom Indicator

Use bg-* classes to change the color of the indicator.

API Reference

SegmentGroup

Root component. Manages segmented control state (single or multi-select).

SegmentGroupIndicator

Visual indicator that moves to the selected segment(s).

SegmentGroupItem

Single segment option. Use value for selection.

SegmentGroupItemText

Text label for a segment. Often wraps icon + text.

For a complete list of props, see the Ark UI documentation.