Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Command examples · Standard

Command Actions Menu for React

An inline command menu of quick and file actions, each with an icon and a shortcut hint.

Framework
UI library

Six file actions in two groups, Quick Actions and File Actions, each with an icon and the shortcut it stands for. Use it where the same few operations come up again and again and people would rather type than hunt through a toolbar. The menu sits in the page, always open, with no trigger. In React, Base UI handles the keyboard navigation.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How is this menu placed on the page?

Command has h-auto w-full max-w-lg rounded-lg border shadow-md: it sits in the page flow, up to a max width, with a border and a shadow. The list is always open and there is no trigger.

How are the actions grouped?

Two CommandGroups: Quick Actions holds Open, Copy and Add to Favorites, and File Actions holds Download, Share and Delete. There is no separator, so the headings alone split them. Each row starts with a decorative icon: ArrowRight, Copy, Star, Download, Share or Trash.

Where do the key hints come from?

Each hint is a CommandShortcut: Open shows ↵, Copy ⌘C, Add to Favorites ⌘D, Download ⌘⇧D, Share ⌘⇧S and Delete ⌘⌫. It's a label at the end of the row and binds nothing: listen for those keys yourself if they should run the action.

What appears when nothing matches the search?

CommandEmpty in the list says "No actions found." It shows only when the search leaves nothing.

How do I run an item from this menu in React?

These items don't run anything yet. Pass onSelect to each CommandItem.

How do the keys work in this menu?

The arrow keys move through the items, Enter runs the highlighted one, and typing filters the list. CommandInput shows "Search actions..." until someone types. Command filters and ranks the items by their text on its own.

All 21 command examples