Command

명령이나 이동 대상을 검색하고 키보드로 빠르게 선택할 때 사용합니다.

미리보기

도시 검색 명령

도시 네 항목을 검색·선택해 로컬 결과를 표시하고 검색 결과 없음과 단축키 표기를 확인합니다.

저장된 상태

미리보기를 불러오는 중입니다.

설치

Registry를 처음 사용한다면 기본 설정과 공통 스타일 설치 을 먼저 완료하세요.

npx shadcn@latest add @neumorphism-ui/command

공통 base를 한 번 설치한 뒤 CLI로 필요한 컴포넌트와 의존성을 추가합니다.

Registry JSON

사용법

CommandInput과 CommandList를 구성하고 CommandItem을 그룹으로 묶은 뒤 CommandEmpty를 제공하세요. onSelect를 실제 동작에 연결하며 단축키 텍스트는 키 동작을 자동 등록하지 않습니다.

"use client";

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

export default function Example() {
  const [selection, setSelection] = useState("No command selected.");
  return (
    <div>
      <Command>
        <CommandInput placeholder="Search commands" />
        <CommandList>
          <CommandEmpty>No commands found.</CommandEmpty>
          <CommandGroup heading="Navigation">
            <CommandItem value="projects" onSelect={() => setSelection("Projects selected.")}>Projects</CommandItem>
            <CommandItem value="settings" onSelect={() => setSelection("Settings selected.")}>Settings</CommandItem>
          </CommandGroup>
        </CommandList>
      </Command>
      <p role="status">{selection}</p>
    </div>
  );
}

API 레퍼런스

cmdk의 검색·활성 항목·키보드 탐색을 유지하면서 입력 영역은 inset, 선택된 항목은 눌린 표면으로 표현합니다. CommandDialog로 기존 Dialog와 조합할 수 있습니다.

컴포넌트	속성	타입	기본값	설명
`Command`	`shouldFilter`	`boolean`	`true`	cmdk의 내장 검색 필터를 사용할지 결정합니다.
`Command`	`value / onValueChange`	`string / (value: string) => void`	`—`	현재 활성 항목을 제어합니다.
`CommandInput`	`value / onValueChange`	`string / (value: string) => void`	`—`	검색어를 제어하거나 uncontrolled 입력으로 사용합니다.
`CommandItem`	`value / onSelect`	`string / (value: string) => void`	`—`	검색 값과 항목 선택 동작을 지정합니다.
`CommandItem`	`disabled`	`boolean`	`false`	항목을 검색 결과에는 유지하면서 선택할 수 없게 합니다.

미리보기

도시 검색 명령

설치

사용법

API 레퍼런스

접근성