Icon Stack Select

Select an option while keeping its associated icons visible in the closed trigger.

Components / Icon Stack Select

Formsselecticonskeyboardpopover

Rounded select with overlapping option icons and a custom dark menu. Keyboard navigation skips disabled options; the popup uses the browser top layer to escape overflow clipping.

Preview

Loading preview…

Usage

Select an option while keeping its associated icons visible in the closed trigger.

<IconStackSelect
  label="Model"
  value={model}
  onValueChange={setModel}
  options={[
    { value: "fast", label: "Fast", icons: [
      { id: "cloud", label: "Cloud provider", icon: <img src="/cloud.svg" alt="" /> },
      { id: "local", label: "Local provider", icon: <img src="/local.svg" alt="" /> },
    ] },
    { value: "balanced", label: "Balanced" },
    { value: "large", label: "Large (unavailable)", disabled: true },
  ]}
/>

Files

components/steez/IconStackSelect.tsxcomponent

components/steez/IconStackSelect.module.cssstyle

Install package

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

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

Install from registry

pnpm dlx shadcn@latest add https://steez-ui-6v5.pages.dev/r-steez/icon-stack-select.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 { IconStackSelect } from "<project-root>/components/steez/IconStackSelect";

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

Copy standalone file

/copy/steez/icon-stack-select.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

Cyberpunk Select

Select field with shared Steez framing and arrow treatment.

Segmented Control

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