탐색과 공개@neumorphism-ui/command

Command

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

@neumorphism-ui/command

Registry JSON

미리보기

저장된 상태

설치

npx shadcn@latest add @neumorphism-ui/command

CLI가 npm 의존성, base 토큰, utils와 컴포넌트 소스를 순서대로 확인하고 설치합니다.

Registry를 처음 사용한다면 namespace 설정 을 먼저 완료하세요.

사용법

Import

"use client";
import * as React from "react";
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandShortcut,
} from "@/components/ui/command";

Example

export default function Example() {
  const [selected, setSelected] = React.useState("선택한 명령 없음");
  return <div className="grid w-full max-w-md gap-3">
    <Command>
      <CommandInput placeholder="명령 검색" />
      <CommandList>
        <CommandEmpty>일치하는 명령이 없습니다.</CommandEmpty>
        <CommandGroup heading="탐색">
          <CommandItem value="dashboard" onSelect={() => setSelected("대시보드")}>대시보드<CommandShortcut>⌘D</CommandShortcut></CommandItem>
          <CommandItem value="settings" onSelect={() => setSelected("설정")}>설정<CommandShortcut>⌘,</CommandShortcut></CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
    <p role="status" className="text-sm text-[var(--muted-foreground)]">{selected}</p>
  </div>;
}

API 레퍼런스

컴포넌트	속성	타입	기본값	설명
`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`	항목을 검색 결과에는 유지하면서 선택할 수 없게 합니다.

미리보기

설치

사용법

Import

Example

API 레퍼런스

접근성