Locara
← All components AI affordances

ModeSwitcher

Cursor-style Ask/Edit/Agent pill tabs. Compact horizontal tabs with optional icons + shortcuts.

Inspired by Cursor mode switcher (Cmd+. tabs).

Preview

What it looks like.

Usage

Drop it into your app.

import { ModeSwitcher } from '@locara/components'

<ModeSwitcher
  value={mode}
  onChange={setMode}
  modes={[
    { id: 'ask', label: 'Ask' },
    { id: 'edit', label: 'Edit' },
    { id: 'agent', label: 'Agent', shortcut: '⌘.' },
  ]}
/>

Or copy the source into your repo: locara add mode-switcher