Collapsible

Installation

Install from the Vuzeno registry:

      Copy
      bunx --bun shadcn-vue@latest add https://vuzeno.com/r/collapsible.json
    

      Copy
      npx shadcn-vue@latest add https://vuzeno.com/r/collapsible.json
    

      Copy
      yarn dlx shadcn-vue@latest add https://vuzeno.com/r/collapsible.json
    

      Copy
      pnpm dlx shadcn-vue@latest add https://vuzeno.com/r/collapsible.json
    

Usage

      Copy
      <script setup lang="ts">
import { Collapsible } from "@/components/ui/collapsible";
</script>

<template>
  <Collapsible.Root>
    <!-- … -->
  </Collapsible.Root>
</template>
    

Composition

      Copy
      Collapsible.Root
├── Collapsible.Trigger
│   └── Collapsible.Indicator
├── Collapsible.Content
│   └── Collapsible.Body
├── Collapsible.Context
└── Collapsible.RootProvider
    

Examples

Disabled

Use the disabled prop to disable the collapsible and prevent it from being toggled.

Partial Collapse

Use the collapsedHeight or collapsedWidth props to create a "show more/less" pattern. When set, the content maintains the specified dimensions when collapsed instead of collapsing to 0px.

We expose the --collapsed-height or --collapsed-width variables to use in your CSS animations.

Nested Collapsibles

You can nest collapsibles within collapsibles to create hierarchical content structures.

Lazy Mount

Use lazyMount to delay mounting the content until first opened, and unmountOnExit to remove it from the DOM when collapsed. Combining both ensures the component is only in the DOM while expanded.

Root Provider

An alternative way to control the collapsible is to use the RootProvider component and the useCollapsible hook. This way you can access the state and methods from outside the component.

API

See Ark UI Collapsible docs for full props and examples.