> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.
# AnimatedExpandableContainer
> Animate a controlled panel as it opens and closes.
export const StoryEmbed = ({storyId, title, height = 240}) => <>
Open in Storybook
;
`AnimatedExpandableContainer` animates the height or width of its content. The application owns its expanded state and trigger. There is no uncontrolled mode or built-in toggle.
## Anatomy
```text theme={null}
Application
├── Button (application-supplied trigger)
└── AnimatedExpandableContainer
└── Content
```
`children` and `isExpanded` are required. The component supplies the collapsible root and animated panel internally. Supply the trigger separately and keep its `aria-expanded` value synchronized with `isExpanded`.
## Usage
```tsx theme={null}
import { useState } from 'react';
import { Button } from 'twenty-ui/primitives/input';
import { AnimatedExpandableContainer } from 'twenty-ui/primitives/layout';
import { Text } from 'twenty-ui/primitives/typography';
export const ImportDetails = () => {
const [isExpanded, setIsExpanded] = useState(false);
return (
<>
Match each CSV column to a record field before importing.
);
};
```
## Animation and content lifetime
The default dimension is `height`. Use `dimension="width"` for horizontal expansion. `containAnimation` defaults to `true`, clips overflow, and lays content out in a column. Turn it off when content needs to overflow during the transition.
Use `duration` for a theme timing preset (`instant`, `fast`, `normal`, or `slow`). `animationDurations={{ opacity: 0.15, size: 0.25 }}` supplies independent durations in seconds and takes precedence over the preset.
The panel unmounts its content after closing. Keep state that must survive closing outside the panel. The component does not forward native attributes or refs to its internal panel; keep focus handling and trigger relationships in the application.
`mode` and `initial` remain in the accepted prop type but currently have no effect.
## Props
Default theme timing or separate opacity and size durations in seconds.
Content inside the expanding panel.
Clips overflowing content during expansion and uses a column layout.
Dimension animated when the panel opens and closes.
Theme timing preset for both opacity and size. Explicit `animationDurations` take precedence.
Compatibility prop accepted by the type but not used by the current implementation.
Controlled visibility of the panel. The application owns the trigger and state.
Compatibility prop accepted by the type but not used by the current implementation.