Docs
Segmented Control

Segmented Control

A set of interactive segments, where only one segment can be selected at a time.

DocsAPI Reference

Installation

pnpm dlx radixcn@latest add segmented-control

Usage

import { SegmentedControl, SegmentedControlItem } from "@/components/ui/segmented-control"
<SegmentedControl defaultValue="preview">
  <SegmentedControlItem value="preview">Preview</SegmentedControlItem>
  <SegmentedControlItem value="code">Code</SegmentedControlItem>
  <SegmentedControlItem value="properties">Properties</SegmentedControlItem>
</SegmentedControl>
Scroll AreaSelect