1. Docs
  3. Components
  5. Collapsible

Collapsible

An interactive component which expands/collapses a panel.

Docs

Installation

npx shadcn@latest add @kanpeki/collapsible

Anatomy

import { Collapsible } from "~/components/ui/collapsible";

<Collapsible.Root>
  <Collapsible.Trigger>Is it accessible?</Collapsible.Trigger>
  <Collapsible.Content>
    Yes. It adheres to the WAI-ARIA design pattern.
  </Collapsible.Content>
</Collapsible.Root>

Trigger

You can use the <Collapsible.Trigger /> component to create a button that toggles the visibility of the collapsible content, or you can use the <Button /> component as the trigger by passing it a slot="trigger" prop.

<Collapsible.Root>
  <Button slot="trigger" variant="ghost">Is it accessible?</Button>
  <Collapsible.Content>
    Yes. It adheres to the WAI-ARIA design pattern.
  </Collapsible.Content>
</Collapsible.Root>

Animation

CheckboxDate Field