Mokri

Preview

<> import.ts

import { Command } from "@/components/ui/command"

<> component.tsx

import { Command } from "@/components/ui/command"

<Command />

A searchable command palette with grouping, keyboard navigation, and actions.

<> import.ts

import { Command, CommandGroup, CommandPresets, CommandIcons } from "@/components/ui/command"

Prop	Type	Default	Description
`items`	`Array<{ id: string; label: string; description?: string; icon?: React.ReactNode; keywords?: string[]; action?: () => void; disabled?: boolean; group?: string; shortcut?: string }>`	—	List of commands
`placeholder`	`string`	`"Type a command or search..."`	Input placeholder
`className`	`string`	`""`	Additional CSS classes
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Control sizing
`variant`	`"default" \| "minimal" \| "bordered"`	`"default"`	Visual style
`showGroups`	`boolean`	`true`	Group items by their group field
`maxHeight`	`string`	`"max-h-80"`	Max height utility for the results
`onSelect`	`(item: any) => void`	—	Called with selected item
`onSearch`	`(query: string) => void`	—	Called when query changes

<> example.tsx

// Quick actions
<Command {...CommandPresets.quickActions} items={[{ id: '1', label: 'Open' }, { id: '2', label: 'Save' }]} />

quickActions

Small, minimal, no group headers

fullPalette

Default variant with groups

compact

Small, bordered, no groups