Collapsible

An interactive component which expands/collapses a panel.

@@directive("'use client'")

@react.component

Installation

npx shadcn@latest add @rescript-shadcn/Collapsible

Usage

<Collapsible>
  <Collapsible.Trigger render={<Button variant=Ghost size=Icon />}>
    <Icons.ChevronsUpDown />
  </Collapsible.Trigger>
  <Collapsible.Content>
    {"Content here."->React.string}
  </Collapsible.Content>
</Collapsible>

Controlled State

Use the open and onOpenChange props to control the state.

@react.component
let make = () => {
  let (open_, setOpen) = React.useState(() => false)
 
  <Collapsible open_= onOpenChange={o => setOpen(_ => o)}>
    <CollapsibleTrigger> {"Toggle"->React.string} </CollapsibleTrigger>
    <CollapsibleContent> {"Content"->React.string} </CollapsibleContent>
  </Collapsible>
}

Examples

Basic

@react.component
let make = () =>
  <Card className="mx-auto w-full max-w-sm">

Settings Panel

Use a trigger button to reveal additional settings.

@@directive("'use client'")

@react.component

File Tree

Use nested collapsibles to build a file tree.

type rec fileTreeItem =
  | File({name: string})
  | Folder({name: string, items: array<fileTreeItem>})

API Reference

See the Base UI documentation for more information.