Collapsible

설치 확인

하나의 접고 펴기

1. 목적과 출처

하나의 접고 펴기

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

2. 프리뷰와 변형

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

Collapsible 상태
상태	모양
접힘	필터 3개 적용됨
펼침 defaultOpen	필터 3개 적용됨 상태: 진행 중담당자: 김민서라벨: 버그

3. 속성 바꿔 보기

필터 3개 적용됨

접힘

펼친 채 시작(defaultOpen)

<Collapsible>
  <span>필터 3개 적용됨</span>
  <CollapsibleTrigger render={<Button variant="ghost" size="icon-sm" aria-label="필터 펼치기·접기" />}>
    <ChevronsUpDown />
  </CollapsibleTrigger>
  <CollapsibleContent>…</CollapsibleContent>
</Collapsible>

4. 설치와 사용

npx shadcn@4.23.0 add @adcapsule/collapsible

npm 패키지: @base-ui/react
함께 설치: 없음

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

import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"

<Collapsible>
  <CollapsibleTrigger render={<Button variant="ghost" />}>더 보기</CollapsibleTrigger>
  <CollapsibleContent>…</CollapsibleContent>
</Collapsible>

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

제품에서 바꿔도 되는 것

open·onOpenChange 또는 defaultOpen
트리거는 render로 Button 등
여러 항목을 묶어 하나씩 펼칠 때는 Accordion

공통으로 유지할 토큰

모양 없음(감싼 요소의 스타일을 따름)

Collapsible

설치 확인

하나의 접고 펴기

1. 목적과 출처

하나의 접고 펴기

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

2. 프리뷰와 변형

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

Collapsible 상태
상태	모양
접힘	필터 3개 적용됨
펼침 defaultOpen	필터 3개 적용됨 상태: 진행 중담당자: 김민서라벨: 버그

3. 속성 바꿔 보기

필터 3개 적용됨

접힘

펼친 채 시작(defaultOpen)

<Collapsible>
  <span>필터 3개 적용됨</span>
  <CollapsibleTrigger render={<Button variant="ghost" size="icon-sm" aria-label="필터 펼치기·접기" />}>
    <ChevronsUpDown />
  </CollapsibleTrigger>
  <CollapsibleContent>…</CollapsibleContent>
</Collapsible>

4. 설치와 사용

npx shadcn@4.23.0 add @adcapsule/collapsible

npm 패키지: @base-ui/react
함께 설치: 없음

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

import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"

<Collapsible>
  <CollapsibleTrigger render={<Button variant="ghost" />}>더 보기</CollapsibleTrigger>
  <CollapsibleContent>…</CollapsibleContent>
</Collapsible>

1. 목적과 출처

2. 프리뷰와 변형

3. 속성 바꿔 보기

4. 설치와 사용

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

제품에서 바꿔도 되는 것

공통으로 유지할 토큰

6. 관련 패턴·템플릿

1. 목적과 출처

2. 프리뷰와 변형

3. 속성 바꿔 보기

4. 설치와 사용

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

제품에서 바꿔도 되는 것

공통으로 유지할 토큰

6. 관련 패턴·템플릿