Neumorphism UI

Accordion

관련된 내용을 훑어보고 필요한 부분만 펼쳐 읽을 때 사용합니다. 독립적인 영역 하나를 접고 펼친다면 Collapsible이 적합합니다.

미리보기

컴포넌트 설정 질문

스타일 토큰, 소스 수정, 키보드 조작에 관한 세 가지 질문을 펼칩니다. 토큰 답변이 처음부터 열려 있습니다.

먼저 공통 스타일을 한 번 설치하세요. 뉴모피즘 surface, shadow, radius 토큰이 프로젝트 CSS에 연결되고 각 컴포넌트가 이를 사용합니다.

설치

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

npx shadcn@latest add @neumorphism-ui/accordion

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

Registry JSON

사용법

각 AccordionItem 안에 제목 역할의 AccordionTrigger와 본문인 AccordionContent를 배치하고 고유한 value를 지정하세요. 여러 답변을 함께 열어 두려면 multiple을 설정합니다.

"use client";

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

export default function Example() {
  return (
    <Accordion>
      <AccordionItem value="shipping">
        <AccordionTrigger>When will my order arrive?</AccordionTrigger>
        <AccordionContent>Orders ship in 2–3 business days.</AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

API 레퍼런스

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

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

접근성

  • 01

    Base UI가 trigger와 panel의 aria-expanded, aria-controls 연결을 관리합니다.

  • 02

    Tab으로 trigger에 접근하고 Enter 또는 Space로 항목을 열고 닫습니다.

  • 03

    AccordionTrigger는 실제 버튼이므로 제목 안에 별도의 중첩 버튼을 넣지 않습니다.