The library is still in early development. Breaking changes and bugs may occur without prior notice. Thanks for your interest in using the library!
A command menu component that provides a command palette interface for quick actions and navigation.
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>
Add onSelect
prop to <CommandMenuItem>
component to trigger actions.
Add icons to your command menu items for better visual hierarchy.
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.
Organize your command menu items into nested groups for better organization.
Prop | Type | Default | Description |
---|---|---|---|
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. |
Prop | Type | Default | Description |
---|---|---|---|
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. |