Skip to content
OTF Kit logoOTF Kit

Command Bar

Input

Keyboard-driven command bar (⌘K) with grouped actions, search, and shortcuts.

View in Storybook
Command Bar
Loading Storybook preview…

Installation

bun add @otfdashkit/ui

Usage

Import CommandBar from @otfdashkit/ui.

Code
// Command Bar — Keyboard-driven command bar (⌘K) with grouped actions, search, and shortcuts.
//
// Install:
//   bun add @otfdashkit/ui

import { CommandBar } from '@otfdashkit/ui'

export function Example() {
  return (
    <CommandBar>
      {/* your content */}
    </CommandBar>
  )
}

Props

Props declared in the CommandBar source. Inherited HTML attributes are not listed.

PropTypeDefaultDescription
childrenrequiredReactNode
onOpenChangerequired(v: boolean) => void
openrequiredboolean
onSearch(q: string) => void
placeholderstring'Search commands...'

Related