Docs
Components
Collapsible

Collapsible

An interactive component which expands/collapses a panel.

Docs

Preview

Code

@peduarte starred 3 repositories

@radix-ui/primitives

Installation

CLI

Manual

npx shadcn@latest add @kanpeki/collapsible

Anatomy

Single import

Multiple imports

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>;

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

The accordion uses the --disclosure-panel-height CSS variable to animate the height of the content area.

API Reference

Collapsible.Root

Prop	Type	Default
`isExpanded`	`boolean`
`defaultExpanded`	`boolean`
`onExpandedChange`	`function`
`isDisabled`	`boolean`
`children`	`ReactNode`

Collapsible.Trigger

Prop	Type	Default
`isDisabled`	`boolean`
`children`	`ReactNode`

Collapsible.Content

Prop	Type	Default
`className`	`string`
`children`	`ReactNode`

Checkbox Date Field

On This Page

Installation
Anatomy
Trigger
Animation
API Reference
Collapsible.Root
Collapsible.Trigger
Collapsible.Content

Contribute