# Collapsible (/docs/components/collapsible)



<ComponentPreview name="collapsible-demo" />

## Overview [#overview]

Use a collapsible when one piece of content can be shown or hidden by a single control.

Collapsible is simpler than accordion. It is a good fit for optional details, advanced settings, helper text, or a single expandable section.

## Anatomy [#anatomy]

A collapsible has a root, trigger, and content. The trigger controls whether the content is visible. The content should be directly related to the trigger.

## Behavior [#behavior]

Use collapsible when there is only one expandable region. If you have several related expandable regions, use Accordion instead.

## Accessibility [#accessibility]

The trigger should be a real button with clear text. Keep focus visible and make sure the expanded state is communicated by the primitive.

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add collapsible
    ```
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @base-ui-components/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource name="collapsible" title="components/ui/collapsible.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsPanel>
</CodeTabs>

## Usage [#usage]

```tsx
import {
  Collapsible,
  CollapsiblePanel,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"
```

```tsx
<Collapsible>
  <CollapsibleTrigger>Can I access the file in the cloud?</CollapsibleTrigger>
  <CollapsiblePanel>
    Yes, you can access the file in the cloud.
  </CollapsiblePanel>
</Collapsible>
```