Collapsible

An avatar component with a fallback for initials.

API reference

Collapsible.Root

Groups all parts of the collapsible. Renders a <div> element.

Prop	Type	Default	Responsive
defaultOpen	boolean	false	No
open	boolean	-	No
onOpenChange	(open) => void	-	No
render	React.ReactElement(props, state) => React.ReactElement	-	No
className	string	-	No
style	CSSProperties	-	No

Collapsible.Trigger

The trigger by default render a simple unstyled button. Because menus can be rendered in different ways, we recommend using the render prop to render a custom trigger.

<Collapsible.Trigger render={props => <Button {...props} />} />

Prop	Type	Default	Responsive
render	React.ReactElement(props, state) => React.ReactElement	-	No
className	string	-	No
style	CSSProperties	-	No

Collapsible.Panel

A panel with the collapsible contents. Renders a <div> element.

Prop	Type	Default	Responsive
hiddenUntilFound	boolean	false	No
keepMounted	boolean	false	No
render	React.ReactElement(props, state) => React.ReactElement	-	No
className	string	-	No
style	CSSProperties	-	No

Examples

Open the panel by default by setting the defaultOpen prop to true.

It's the edge of the world and all of Western civilization

The sun may rise in the East, at least it settled in a final location

It's understood that Hollywood sells Californication

<Collapsible.Root defaultOpen>
  <Collapsible.Trigger render={(props, state) => (
    <Button {...props}>
      {state.open ? 'Close Panel' : 'Open Panel'}
    </Button>
  )} />
  <Collapsible.Panel>
    <Box>
      <Text>It's the edge of the world and all of Western civilization</Text>
      <Text>The sun may rise in the East, at least it settled in a final location</Text>
      <Text>It's understood that Hollywood sells Californication</Text>
    </Box>
  </Collapsible.Panel>
</Collapsible.Root>