Overlays & Feedback·Available inReact Vue Angular·View as Markdown

Preview

example.tsxtsx

Switch the framework picker (top-right of the panel) to render the same demo live in React, Vue, or Angular — same class names, ARIA, and visual output across all three.

Installation

Sisyphos UI ships unified packages for React, Vue, and Angular. Pick the one that matches your stack — every framework exports the same component classes, ARIA semantics, and CSS tokens.

$ pnpm add @sisyphos-ui/react

Then import the bundled stylesheet once at app entry: import "@sisyphos-ui/react/styles.css";

Usage

Idiomatic usage in each supported framework

example.tsx

import { Command } from "@sisyphos-ui/react";

export const Palette = () => (
  <Command label="Command menu">
    <Command.Input placeholder="Type a command…" />
    <Command.List>
      <Command.Empty>No results.</Command.Empty>
      <Command.Group heading="Suggestions">
        <Command.Item value="new-file" onSelect={() => {}}>New file</Command.Item>
        <Command.Item value="open-recent" onSelect={() => {}}>Open recent…</Command.Item>
      </Command.Group>
    </Command.List>
  </Command>
);

Anatomy

The Command is a compound component. Compose the parts that match your use case.

Anatomy

<Command.Root>
  <Command.Input />// Text input that drives the filter.required
  <Command.List />// Scrollable listbox region.required
  <Command.Empty />// Rendered when no items match.
  <Command.Group />// Optional section with an `heading`.
  <Command.Item />// Selectable row filtered by `value`.required
  <Command.Separator />// Visual divider.
</Command.Root>

Inside a Dialog

The classic ⌘K experience — drop `<Command>` inside `<Dialog>` and the input takes focus on open.

example.tsxtsx

With shortcuts

Drop a `<Kbd>` inside each `<Command.Item>` — it flows to the right automatically via `margin-left: auto` on the flex row.

example.tsxtsx

Disabled items

`disabled` items are still rendered but don't match, aren't focusable, and can't be activated.

example.tsxtsx

API

Prop	Type	Default	Description
value	string	—	Controlled search value. Omit to let the component manage its own state.
defaultValue	string	""	Initial search value when uncontrolled.
onValueChange	(value: string) => void	—	Fires whenever the search value changes.
onSelect	(value: string) => void	—	Fires when an item is activated (click or Enter). Receives the item's `value` prop.
label	string	"Command menu"	Accessible name for the combobox root.

The full API including refs, ARIA attributes, and HTML passthroughs lives in the package README on npm.

Accessibility

Adheres to the Combobox WAI-ARIA design pattern.

Keyboard interactions

Key	Action
`ArrowDown`then`ArrowUp`	Move the active item (wraps at the edges).
`Home`then`End`	First / last matching item.
`Enter`	Activate the current item.

Need more?View on npm →