Segmented Control

Compact tab-like control for mode switches and view filters.

Components / Segmented Control

Layoutfiltersswitcher

Shared segmented control for compact workspace switching.

Preview

Loading preview…

Usage

Compact tab-like control for mode switches and view filters.

<SegmentedControl
  value={mode}
  onChange={setMode}
  options={[
    { value: "registry", label: "Registry" },
    { value: "packages", label: "Packages" },
  ]}
/>

Files

components/steez/SegmentedControl.tsxcomponent

components/steez/SegmentedControl.module.cssstyle

Install package

pnpm add @steez-ui/theme @steez-ui/icons @steez-ui/ui

import { SegmentedControl } from "@steez-ui/ui";

Install from registry

pnpm dlx shadcn@latest add https://steez-ui-6v5.pages.dev/r-steez/segmented-control.json

Source files install at your project root. Import styles/steez/tokens.css once in your global stylesheet or root layout. No Steez packages needed.

import { SegmentedControl } from "<project-root>/components/steez/SegmentedControl";

Replace <project-root> with a relative path from your file.

Copy standalone file

/copy/steez/segmented-control.tsxLoading…

Copy the entire generated TSX file into your React project. It embeds CSS, local helpers, icons, and theme fallbacks, so no Steez npm packages are required.

Open standalone source

Tabbed Panel

Simple tabbed container for grouped content and install flows.

Page Template

Page wrapper that composes the header, subtabs, and content area.