Compositereadycomponentready

Command

A searchable command-list primitive with grouped rows, shortcuts, disabled items, and dialog composition.

Importimport { Command, CommandInput, CommandList, CommandItem } from 'radcn/command'

Preview

Live package example

Render the upstream Command card and Command dialog examples with grouped rows, app-owned icons, shortcuts, and app-owned shortcut opening.

Demo and Dialog

Render the upstream Command card and Command dialog examples with grouped rows, app-owned icons, shortcuts, and app-owned shortcut opening.

Preview

Suggestions

Calendar

Search Emoji

Calculator

Settings

Profile⌘P

Billing⌘B

Settings⌘S

Press

⌘J

import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from 'radcn/command'
import { Kbd, KbdGroup } from 'radcn/kbd'

function CommandIcon({ name }: { name: string }) {
  return <span aria-hidden="true" data-command-icon={name}>{name.slice(0, 1)}</span>
}

export function CommandExamples() {
  return (
    <>
      <Command class="command-demo" style="width:min(100%,450px);">
        <CommandInput placeholder="Type a command or search..." />
        <CommandList>
          <CommandEmpty>No results found.</CommandEmpty>
          <CommandGroup heading="Suggestions">
            <CommandItem value="calendar"><CommandIcon name="Calendar" /> Calendar</CommandItem>
            <CommandItem value="search-emoji"><CommandIcon name="Smile" /> Search Emoji</CommandItem>
            <CommandItem disabled value="calculator"><CommandIcon name="Calculator" /> Calculator</CommandItem>
          </CommandGroup>
          <CommandSeparator />
          <CommandGroup heading="Settings">
            <CommandItem value="profile"><CommandIcon name="User" /> Profile <CommandShortcut>⌘P</CommandShortcut></CommandItem>
            <CommandItem value="billing"><CommandIcon name="CreditCard" /> Billing <CommandShortcut>⌘B</CommandShortcut></CommandItem>
            <CommandItem value="settings"><CommandIcon name="Settings" /> Settings <CommandShortcut>⌘S</CommandShortcut></CommandItem>
          </CommandGroup>
        </CommandList>
      </Command>

      <p>Press <KbdGroup><Kbd>⌘</Kbd><Kbd>J</Kbd></KbdGroup></p>
      <CommandDialog title="Command Palette" description="Search for a command to run...">
        <Command>
          <CommandInput placeholder="Type a command or search..." />
          <CommandList>{/* same rows, with Calculator enabled */}</CommandList>
        </Command>
      </CommandDialog>
    </>
  )
}

Installation

Intended future install command. RadCN is private and not published to npm yet, so this snippet documents the target user-facing API rather than something external consumers can run today.

pnpm add radcn # intended future package
import { Command, CommandInput, CommandList, CommandItem } from 'radcn/command'

Theming

RadCN tokens read the resolved theme from the document. Store the user's preference separately, then resolve system preferences to a concrete light or dark theme before setting package tokens.

<html data-radcn-theme-mode="system" data-radcn-theme="dark">
  ...
</html>

Accessibility

CommandList renders role="listbox" and CommandItem renders role="option" with aria-selected and aria-disabled state during enhancement.
CommandGroup heading renders visible text with data-radcn-command-group-heading and can label the group when an explicit id is supplied.
Keyboard navigation covers Arrow keys, Home, End, Enter, and Escape for query clearing while disabled items stay unavailable.
CommandDialog composes RadCN Dialog so the command palette keeps dialog role, title, description, focus, and Escape dismissal behavior.

Customization

Command exposes public data-radcn-command hooks for root, input, list, empty state, groups, group headings, items, separators, shortcuts, and dialog composition.
Rows accept arbitrary children, so app-owned icons, labels, and shortcut hints can match the upstream examples without lucide-react.
className maps to class; Tailwind width, border, shadow, flex, and gap utilities map to class, style, CSS variables, or app CSS.
Dialog shortcut guidance can compose RadCN Kbd while the document-level shortcut listener remains app-owned enhancement.

Remix 3 Notes

React useState, useEffect, open, and onOpenChange map to explicit server-rendered state plus app-owned browser enhancement where dynamic shortcut opening is needed.
cmdk and CommandPrimitive are upstream React implementation details; RadCN implements searchable listbox behavior with native DOM enhancement.
SearchIcon, Calendar, Smile, Calculator, User, CreditCard, Settings, lucide-react, and icon sizing utilities are app-owned presentation, not Command dependencies.
className maps to class, data-slot maps to data-radcn-command* hooks, cn and Tailwind utilities map to RadCN package classes/CSS variables/app CSS, and vendor source remains read-only evidence.
Command composes Dialog and Kbd without making global keyboard routing, Dialog state callbacks, or Kbd styling part of the Command package.