Segment Group

Installation#

pnpmbunnpmyarn
pnpm dlx shadcn@latest add @shark/segment-group

Anatomy#

SegmentGroup
└── SegmentGroupItem
    └── SegmentGroupItemText

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.

States#

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#

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 *:data-[slot=segment-group-indicator]: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.