Question 1

What is the Command?

Accepted Answer

shadcn.io's Command is a search field over a list of items that filters as you type, with the arrow keys to move and Enter to run the highlighted item. It comes with CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator and CommandShortcut parts, plus CommandDialog to open it over the page. Each example in this gallery is one small file built from those parts.

Question 2

Are these command examples free?

Accepted Answer

Yes. Every example is free to use in personal and commercial projects, with no attribution required. Seeing the code and installing an example takes a free shadcn.io account.

Question 3

What's the difference between a Command and a Combobox?

Accepted Answer

A Command runs an action or jumps somewhere: a palette, a quick actions menu, a file search. A Combobox picks a value that stays in a form field. Both filter a list as you type, but only the Combobox keeps a selection.

Question 4

Why use a command menu in my app?

Accepted Answer

It puts every action one search away. People who know what they want type a few letters instead of hunting through menus, and the list doubles as a map of what the app can do, with the shortcuts beside each item.

Question 5

Should I open the command menu in a dialog or a popover?

Accepted Answer

A dialog for app-wide actions, the palette people open from anywhere: it covers the page and takes all the attention. A popover for actions tied to one control, opened from a button and shown under it. The standard examples sit in the page, for a menu that's always on screen.

Question 6

How do I group commands under headings?

Accepted Answer

Put related items in a CommandGroup with a heading, and add a CommandSeparator between groups when the headings alone don't split the list enough. Group by task, like Quick Actions and File Actions.

Question 7

How do I show keyboard shortcuts next to commands?

Accepted Answer

Put a CommandShortcut at the end of the item, as the icons and shortcuts examples do. It's a label only: make sure the keys it shows really run the action, with a listener of your own.

Question 8

How do I put a badge or a status at the end of a row?

Accepted Answer

Let the item's label grow to fill the row and put the Badge, or a short status text, after it. The status dot examples write the state out beside the dot, so it never rests on color alone.

Question 9

How do I install a command example?

Accepted Answer

Sign in with a free account, open the example and run the install command under Installation. The CLI adds the example's file to your project along with the Command component, and Button, Badge or Popover when the example uses them.

Question 10

How do I open the command dialog with Cmd+K?

Accepted Answer

Listen for keydown on the document and toggle the dialog's open state when the key is k with the meta or control key held. Keep a visible button too, since touch screens have no keyboard shortcut.

Question 11

How do I run an action when an item is chosen?

Accepted Answer

Each library names it its own way: a select handler on each item on Base UI and Radix UI, an action handler on the list on React Aria, and a value change handler on the Command on Ark UI, Vue, Svelte and Solid. Close the dialog or the popover in the same handler.

Question 12

What are command examples built on?

Accepted Answer

shadcn.io's Command, with Button, Badge and Popover in some examples, styled with Tailwind CSS and Lucide icons. In React it's built on Base UI, React Aria, Ark UI or Radix UI, whichever your project uses; the Vue, Svelte and Solid versions are built on Ark UI.

Question 13

Are command examples accessible?

Accepted Answer

Yes. The search field is labeled, the arrow keys move the highlight, Enter runs the item, and Escape closes a dialog or a popover and returns focus to the button. Icons and status dots are hidden from screen readers, so each item is read by its text.

Question 14

Do the examples work with server rendering?

Accepted Answer

Yes. They render on the server, and the search, the keyboard and the dialogs and popovers come alive in the browser.

Command Examples

Command Dialog Actions Menu

Command Dialog with Badges

Command Dialog with Descriptions

Command Dialog with Icons and Shortcuts

Command Dialog with Separators

Command Dialog with Status Indicators

Simple Command Dialog

Command Popover Actions Menu

Command Popover with Badges

Command Popover with Descriptions

Command Popover with Icons and Shortcuts

Command Popover with Separators

More component examples

Menubar

Navigation Menu

Pagination

Tabs

Breadcrumb

Context Menu

Data Table

Date Picker

Command examples MCP, with Pro

Individual

Team

Organization

Individual

Team

Organization

Frequently asked questions

Every command example. One prompt away.