Segmented Control

Navigation

About

A segmented control from the Create UI design system. Flat or grouped, rounded or pill, five sizes, leading and trailing slots, icon-only items and an animated selection indicator. Built with Radix Slot and Tailwind CSS v4.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Segmented Control to your project and fits it to your theme.

Code

How Segmented Control is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import {
  RiBillLine,
  RiChat1Line,
  RiFunctionLine,
  RiLayoutGridFill,
  RiLineChartLine,
  RiListUnordered,
  RiNotification3Line,
  RiSettings3Line,
} from "@create-ui/assets/icons"

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

export default function SegmentedControlShowcase() {
  return (
    <div className="flex flex-col items-center gap-6">
      <SegmentedControl
        variant="neutral"
        appearance="grouped"
        size="lg"
        defaultValue="all"
      >
        <SegmentedControlItem value="all" leading={<RiFunctionLine />}>
          All
        </SegmentedControlItem>
        <SegmentedControlItem
          value="messages"
          leading={<RiChat1Line />}
          trailing={<span>3</span>}
        >
          Messages
        </SegmentedControlItem>
        <SegmentedControlItem value="billing" leading={<RiBillLine />}>
          Billing
        </SegmentedControlItem>
        <SegmentedControlItem
          value="notifications"
          leading={<RiNotification3Line />}
          trailing={<span>7</span>}
          disabled
        >
          Notifications
        </SegmentedControlItem>
        <SegmentedControlItem value="settings" leading={<RiSettings3Line />}>
          Settings
        </SegmentedControlItem>
      </SegmentedControl>

      <div className="flex flex-wrap items-center justify-center gap-4">
        <SegmentedControl
          variant="primary"
          appearance="grouped"
          defaultValue="month"
        >
          <SegmentedControlItem value="day">Day</SegmentedControlItem>
          <SegmentedControlItem value="week">Week</SegmentedControlItem>
          <SegmentedControlItem value="month">Month</SegmentedControlItem>
          <SegmentedControlItem value="year">Year</SegmentedControlItem>
        </SegmentedControl>

        <SegmentedControl
          variant="neutral"
          shape="pill"
          appearance="grouped"
          defaultValue="grid"
        >
          <SegmentedControlItem value="grid" iconOnly aria-label="Grid view">
            <RiLayoutGridFill />
          </SegmentedControlItem>
          <SegmentedControlItem value="list" iconOnly aria-label="List view">
            <RiListUnordered />
          </SegmentedControlItem>
          <SegmentedControlItem value="chart" iconOnly aria-label="Chart view">
            <RiLineChartLine />
          </SegmentedControlItem>
        </SegmentedControl>
      </div>
    </div>
  )
}