Skip to content

Command Item

InputMIT
View in Storybook

Single-row primitive for command menus — leading icon, label, hotkey badge.

bun add @otfdashkit/ui

Preview

Command Item
Loading Storybook preview…

Code

import { Package, User, Star } from 'lucide-react'
import { CommandItem } from '@otfdashkit/ui/command-item'

export function Example() {
  return (
    <div className="max-w-sm space-y-0.5">
      <CommandItem icon={<Package className="h-4 w-4" />} label="New Project" shortcut="⌘N" onClick={() => {}} />
      <CommandItem icon={<User className="h-4 w-4" />} label="Manage Team" description="Invite and manage members" onClick={() => {}} />
      <CommandItem icon={<Star className="h-4 w-4" />} label="Starred Items" active onClick={() => {}} />
    </div>
  )
}

Free with the SDK. This component ships in @otfdashkit/ui under the MIT license.

Props

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

PropTypeDefaultDescription
labelrequiredstring
activeboolean
classNamestring
descriptionstring
iconReactNode
onClick() => void
shortcutstring