Command Item
InputMITSingle-row primitive for command menus — leading icon, label, hotkey badge.
bun add @otfdashkit/ui
Preview
Command ItemInput
Loading Storybook preview…
Code
@otfdashkit/uiimport { 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.
| Prop | Type | Default | Description |
|---|---|---|---|
| labelrequired | string | ||
| active | boolean | ||
| className | string | ||
| description | string | ||
| icon | ReactNode | ||
| onClick | () => void | ||
| shortcut | string |