Command

설치 확인

검색해서 실행하는 명령 목록

1. 목적과 출처

검색해서 실행하는 명령 목록

출처: shadcn 기본 제공 (Base UI 기반 base-nova 스타일)
프로젝트: src/components/ui/command.tsx
Registry: @adcapsule/command

2. 프리뷰와 변형

오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.

Command 상태
상태	모양
목록	검색 결과가 없습니다. 새 이슈C 설정 열기⌘, 이슈 목록G I 프로젝트G P 문서G D
결과 없음 CommandEmpty	검색 결과가 없습니다. 새 이슈C 설정 열기⌘, 이슈 목록G I 프로젝트G P 문서G D

3. 속성 바꿔 보기

항목을 고르면 여기에 표시됩니다

단축키 표시대화상자로 열기

<Command>
  <CommandInput placeholder="명령이나 페이지 검색" />
  <CommandList>
    <CommandEmpty>검색 결과가 없습니다.</CommandEmpty>
    <CommandGroup heading="실행">
      <CommandItem onSelect={…}>
        <Plus />새 이슈
        <CommandShortcut>C</CommandShortcut>
      </CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

4. 설치와 사용

npx shadcn@4.23.0 add @adcapsule/command

npm 패키지: cmdk, lucide-react
함께 설치: @adcapsule/dialog, @adcapsule/input-group, @adcapsule/utils

처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결

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

<Command>
  <CommandInput placeholder="검색" />
  <CommandList>
    <CommandEmpty>검색 결과가 없습니다.</CommandEmpty>
    <CommandGroup heading="이동">
      <CommandItem onSelect={() => router.push("/issues")}>이슈 목록</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

CommandDialog로 감싸 ⌘K 창으로
CommandItem value로 검색어 추가(예: 한국어 이름)
CommandShortcut으로 단축키 표시
CommandEmpty 문구

공통으로 유지할 토큰

surface.raised (--popover)
surface.hover (고른 항목)
text.muted (그룹 제목·단축키)
control.height.md (검색 입력)
radius.xl (패널 16px)
radius.lg (검색 입력 10px)
radius.md (항목 6px)

2. 프리뷰와 변형

오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.

Command 상태
상태	모양
목록	검색 결과가 없습니다. 새 이슈C 설정 열기⌘, 이슈 목록G I 프로젝트G P 문서G D
결과 없음 CommandEmpty	검색 결과가 없습니다. 새 이슈C 설정 열기⌘, 이슈 목록G I 프로젝트G P 문서G D

3. 속성 바꿔 보기

항목을 고르면 여기에 표시됩니다

단축키 표시대화상자로 열기

<Command>
  <CommandInput placeholder="명령이나 페이지 검색" />
  <CommandList>
    <CommandEmpty>검색 결과가 없습니다.</CommandEmpty>
    <CommandGroup heading="실행">
      <CommandItem onSelect={…}>
        <Plus />새 이슈
        <CommandShortcut>C</CommandShortcut>
      </CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

4. 설치와 사용

npx shadcn@4.23.0 add @adcapsule/command

npm 패키지: cmdk, lucide-react
함께 설치: @adcapsule/dialog, @adcapsule/input-group, @adcapsule/utils

처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결

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

<Command>
  <CommandInput placeholder="검색" />
  <CommandList>
    <CommandEmpty>검색 결과가 없습니다.</CommandEmpty>
    <CommandGroup heading="이동">
      <CommandItem onSelect={() => router.push("/issues")}>이슈 목록</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

CommandDialog로 감싸 ⌘K 창으로
CommandItem value로 검색어 추가(예: 한국어 이름)
CommandShortcut으로 단축키 표시
CommandEmpty 문구

공통으로 유지할 토큰

surface.raised (--popover)
surface.hover (고른 항목)
text.muted (그룹 제목·단축키)
control.height.md (검색 입력)
radius.xl (패널 16px)
radius.lg (검색 입력 10px)
radius.md (항목 6px)

1. 목적과 출처

2. 프리뷰와 변형

3. 속성 바꿔 보기

4. 설치와 사용

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

공통으로 유지할 토큰

6. 관련 패턴·템플릿

1. 목적과 출처

2. 프리뷰와 변형

3. 속성 바꿔 보기

4. 설치와 사용

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

공통으로 유지할 토큰

6. 관련 패턴·템플릿