Ember UI LogoEmber UI
Components

Command

A command component

Preview

Loading...
import {  Calculator,  Calendar,  CreditCard,  Settings,  Smile,  User,} from "lucide-react";import {  Command,  CommandEmpty,  CommandGroup,  CommandInput,  CommandItem,  CommandList,  CommandSeparator,  CommandShortcut,} from "@/registry/axon/ui/command";export default function CommandDemo() {  return (    <Command className="rounded-lg border shadow-md md:min-w-[450px]">      <CommandInput placeholder="Type a command or search..." />      <CommandList>        <CommandEmpty>No results found.</CommandEmpty>        <CommandGroup heading="Suggestions">          <CommandItem>            <Calendar />            <span>Calendar</span>          </CommandItem>          <CommandItem>            <Smile />            <span>Search Emoji</span>          </CommandItem>          <CommandItem disabled>            <Calculator />            <span>Calculator</span>          </CommandItem>        </CommandGroup>        <CommandSeparator />        <CommandGroup heading="Settings">          <CommandItem>            <User />            <span>Profile</span>            <CommandShortcut>⌘P</CommandShortcut>          </CommandItem>          <CommandItem>            <CreditCard />            <span>Billing</span>            <CommandShortcut>⌘B</CommandShortcut>          </CommandItem>          <CommandItem>            <Settings />            <span>Settings</span>            <CommandShortcut>⌘S</CommandShortcut>          </CommandItem>        </CommandGroup>      </CommandList>    </Command>  );}

Installation

CLI

npx shadcn@latest add @emberui/command
yarn shadcn@latest add @emberui/command
pnpm dlx shadcn@latest add @emberui/command
bunx --bun shadcn@latest add @emberui/command

Reference

This component is based on the shadcn/ui Command component.

On this page