Accordion

설치 확인

단일·다중 펼침

1. 목적과 출처

단일·다중 펼침

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

2. 프리뷰와 변형

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

Accordion 펼침 방식
방식	모양
하나씩	변경 내용은 브라우저 메모리에만 보관됩니다.
여러 개 multiple

3. 속성 바꿔 보기

변경 내용은 브라우저 메모리에만 보관됩니다.

여러 개 펼침(multiple)첫 항목 펼친 채 시작마지막 항목 비활성

<Accordion defaultValue={[0]}>
  <AccordionItem value={0}>
    <AccordionTrigger>입력한 데이터가 저장되나요?</AccordionTrigger>
    <AccordionContent>…</AccordionContent>
  </AccordionItem>
</Accordion>

4. 설치와 사용

npx shadcn@4.23.0 add @adcapsule/accordion

npm 패키지: @base-ui/react, lucide-react
함께 설치: @adcapsule/utils

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

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

<Accordion defaultValue={[0]}>
  <AccordionItem value={0}>
    <AccordionTrigger>질문</AccordionTrigger>
    <AccordionContent>답</AccordionContent>
  </AccordionItem>
</Accordion>

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

제품에서 바꿔도 되는 것

multiple로 여러 개 펼침
defaultValue·value로 펼친 항목
항목별 disabled

공통으로 유지할 토큰

border.default (항목 구분선)
radius.md (트리거 포커스 6px)
text.secondary (내용)

2. 프리뷰와 변형

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

Accordion 펼침 방식
방식	모양
하나씩	변경 내용은 브라우저 메모리에만 보관됩니다.
여러 개 multiple

3. 속성 바꿔 보기

변경 내용은 브라우저 메모리에만 보관됩니다.

여러 개 펼침(multiple)첫 항목 펼친 채 시작마지막 항목 비활성

<Accordion defaultValue={[0]}>
  <AccordionItem value={0}>
    <AccordionTrigger>입력한 데이터가 저장되나요?</AccordionTrigger>
    <AccordionContent>…</AccordionContent>
  </AccordionItem>
</Accordion>

4. 설치와 사용

npx shadcn@4.23.0 add @adcapsule/accordion

npm 패키지: @base-ui/react, lucide-react
함께 설치: @adcapsule/utils

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

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

<Accordion defaultValue={[0]}>
  <AccordionItem value={0}>
    <AccordionTrigger>질문</AccordionTrigger>
    <AccordionContent>답</AccordionContent>
  </AccordionItem>
</Accordion>

1. 목적과 출처

2. 프리뷰와 변형

입력한 데이터가 저장되나요?

실제 서비스와 연결되어 있나요?

다크 모드는 어떻게 바꾸나요?

입력한 데이터가 저장되나요?

실제 서비스와 연결되어 있나요?

다크 모드는 어떻게 바꾸나요?

3. 속성 바꿔 보기

입력한 데이터가 저장되나요?

실제 서비스와 연결되어 있나요?

다크 모드는 어떻게 바꾸나요?

4. 설치와 사용

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

제품에서 바꿔도 되는 것

공통으로 유지할 토큰

6. 관련 패턴·템플릿

1. 목적과 출처

2. 프리뷰와 변형

입력한 데이터가 저장되나요?

실제 서비스와 연결되어 있나요?

다크 모드는 어떻게 바꾸나요?

입력한 데이터가 저장되나요?

실제 서비스와 연결되어 있나요?

다크 모드는 어떻게 바꾸나요?

3. 속성 바꿔 보기

입력한 데이터가 저장되나요?

실제 서비스와 연결되어 있나요?

다크 모드는 어떻게 바꾸나요?

4. 설치와 사용

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

제품에서 바꿔도 되는 것

공통으로 유지할 토큰

6. 관련 패턴·템플릿