Faber UI
Components

Command

A command palette built on cmdk.

Command is built on cmdk. It renders a searchable command palette with grouped items and keyboard navigation.

Installation

Terminal
pnpm dlx shadcn@latest add https://faber-ui.vercel.app/r/command.json

Usage

typescript
"use client";

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command";

export default function Example() {
  return (
    <Command>
      <CommandInput placeholder="Type a command or search..." />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Suggestions">
          <CommandItem>Calendar</CommandItem>
          <CommandItem>Search</CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  );
}

Examples

Default

API

Each part forwards every prop of what it is built on, including className and render where Base UI supports it. The props column lists only what Faber UI adds on top.

PartBuilt onProps
Commanddata-slot="command"Commandcmdk—
CommandDialogDialogFaber UI
  • title? = "Command Palette"string
  • description? = "Search for a command to run..."string
  • className?string
  • showCloseButton? = falseboolean
  • childrenReact.ReactNode
CommandInputdata-slot="command-input"Command.Inputcmdk—
CommandListdata-slot="command-list"Command.Listcmdk—
CommandEmptydata-slot="command-empty"Command.Emptycmdk—
CommandGroupdata-slot="command-group"Command.Groupcmdk—
CommandSeparatordata-slot="command-separator"Command.Separatorcmdk—
CommandItemdata-slot="command-item"Command.Itemcmdk—
CommandShortcutdata-slot="command-shortcut"<span>HTML—

Changelog

  1. v0.3.0CommandDialog opens and closes without animation, as a keyboard-invoked palette should, and its accessible title renders inside the dialog.patch
  2. v0.3.0Input, Textarea, NativeSelect, CommandInput and ComboboxChipsInput use 16px text on small screens so iOS Safari no longer zooms the page on focus.patch
Full Command history

Last updated on

On this page