Segmented

Navigation

About

A single-select radio-group control that renders a set of mutually exclusive options (or navigation links) as a compact pill, with keyboard arrow-key movement and vertical, horizontal, and icon-label layouts.

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

Code

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

Usage.tsx

"use client";

import Segmented from "@/components/ui/segmented";
import { useState } from "react";

export default function SegmentedDemo() {
  const [selected, setSelected] = useState("overview");

  return (
    <div className="flex w-full max-w-sm flex-col gap-3 p-6">
      <Segmented
        orientation="horizontal"
        value={selected}
        onChange={setSelected}
        ariaLabel="View"
        items={[
          { value: "overview", label: "Overview" },
          { value: "details", label: "Details" },
        ]}
      />
      <output className="text-sm text-muted-foreground">
        {selected === "overview" ? "Overview" : "Details"}
      </output>
    </div>
  );
}