---
title: "Collapsible"
description: "Expand / collapse container with animated content."
section: "Libraries"
group: "UI components"
order: 508
---

## Usage

```tsx
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@aeontel/ui";

<Collapsible>
  <CollapsibleTrigger>Toggle</CollapsibleTrigger>
  <CollapsibleContent>Hidden content.</CollapsibleContent>
</Collapsible>;
```

## Exports

### `Collapsible`

Collapsible container root.

```ts
Collapsible(props: CollapsiblePrimitive.Root.Props): JSX.Element
```

### `CollapsibleTrigger`

Button that toggles the collapsible.

```ts
CollapsibleTrigger(props: CollapsiblePrimitive.Trigger.Props): JSX.Element
```

### `CollapsibleContent`

Content shown when the collapsible is open.

```ts
CollapsibleContent(props: CollapsiblePrimitive.Panel.Props): JSX.Element
```