탐색과 공개@neumorphism-ui/accordion

Accordion

Base UI Accordion의 상태 관리와 접근성 연결을 유지하면서 열린 항목을 inset 표면으로 표현합니다. multiple 옵션과 controlled·uncontrolled 사용을 모두 지원합니다.

@neumorphism-ui/accordion

Registry JSON

미리보기

첫 컴포넌트를 추가할 때 뉴모피즘 surface, shadow, radius 토큰이 프로젝트 CSS에 함께 연결됩니다.

설치

npx shadcn@latest add @neumorphism-ui/accordion

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

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

사용법

Import

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"

Example

<Accordion defaultValue={["shipping"]}>
  <AccordionItem value="shipping">
    <AccordionTrigger>배송은 얼마나 걸리나요?</AccordionTrigger>
    <AccordionContent>
      주문 후 영업일 기준 2–3일 안에 발송됩니다.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="returns">
    <AccordionTrigger>반품할 수 있나요?</AccordionTrigger>
    <AccordionContent>
      수령 후 14일 이내에 반품을 신청할 수 있습니다.
    </AccordionContent>
  </AccordionItem>
</Accordion>

API 레퍼런스

컴포넌트	속성	타입	기본값	설명
`Accordion`	`multiple`	`boolean`	`false`	여러 항목을 동시에 펼칠 수 있게 합니다.
`Accordion`	`value / defaultValue`	`string[]`	`—`	열린 항목의 controlled 또는 초기 uncontrolled 값입니다.
`Accordion`	`onValueChange`	`(value) => void`	`—`	열린 항목이 바뀔 때 호출됩니다.
`AccordionItem`	`value`필수	`string`	`—`	항목을 식별하는 고유 값입니다.
`AccordionItem`	`disabled`	`boolean`	`false`	항목의 trigger를 비활성화합니다.
`AccordionContent`	`keepMounted`	`boolean`	`false`	닫힌 상태에도 패널을 DOM에 유지합니다.

미리보기

스타일 토큰도 함께 설치되나요?

설치 후 소스를 수정할 수 있나요?

키보드 조작을 지원하나요?

설치

사용법

Import

Example

API 레퍼런스

접근성