The library is still in early development. Breaking changes and bugs may occur without prior notice. Thanks for your interest in using the library!

v0.2.49Beta

Search

Command Menu

Source

A command menu component that provides a command palette interface for quick actions and navigation.

Usage

Import the CommandMenu components from @bun-ui/react and use them in your project:

import {
  CommandMenu,
  CommandMenuDialog,
  CommandMenuInput,
  CommandMenuList,
  CommandMenuEmpty,
  CommandMenuGroup,
  CommandMenuItem,
} from "@bun-ui/react"
<CommandMenuDialog>
  <CommandMenuInput placeholder="Type a command or search..." />
  <CommandMenuList>
    <CommandMenuEmpty>No results found.</CommandMenuEmpty>
    <CommandMenuGroup heading="Suggestions">
      <CommandMenuItem>Calendar</CommandMenuItem>
      <CommandMenuItem>Search</CommandMenuItem>
      <CommandMenuItem>Settings</CommandMenuItem>
    </CommandMenuGroup>
  </CommandMenuList>
</CommandMenuDialog>

Examples

With Actions

Add onSelect prop to <CommandMenuItem> component to trigger actions.

With Icons

Add icons to your command menu items for better visual hierarchy.

Use with Dialog

Use the Command Menu with a Dialog component for more flexible layouts and styling. This example shows how to create a custom button trigger that opens a command menu in a dialog.

Search

With Nested Groups

Organize your command menu items into nested groups for better organization.

Props

CommandMenuDialog

PropTypeDefaultDescription
classes
CommandMenuDialogClasses-

Overrides or extends the styles of different parts of the command menu dialog.

commandMenuProps
Omit & RefAttributes-

Props to pass to the CommandMenu component. Use this to customize the behavior of the underlying command menu.

description
string-

The description of the dialog. This will be displayed below the title to provide additional context.

title
string-

The title of the dialog. This will be displayed at the top of the command menu.

CommandMenuDialogClasses

PropTypeDefaultDescription
commandMenu
string-

Styles applied to the command menu component. Controls the styling of the underlying CommandMenu component within the dialog.

content
string-

Styles applied to the dialog content container. Controls the styling of the main content area that wraps the command menu.

description
string-

Styles applied to the dialog description. Controls the styling of the description text displayed below the title.

title
string-

Styles applied to the dialog title. Controls the styling of the title displayed at the top of the command menu dialog.