ComponentsUpdated Sep 9, 2026
Collapsible
A trigger that reveals a panel, with the height animated by CSS. Use it for disclosure inside content; use AnimatedCollapse when you already own the toggle.
Source: packages/ui/src/components/collapsible
import { Collapsible } from '@highlight/ui'Change the props; the preview and the snippet update together.
alien-bean-pasta
wild-irish-burrito
horse-battery-staple
Props
Open
Show icon
Disabled
<Collapsible open onOpenChange={setOpen}> <Collapsible.Trigger>Recovery keys</Collapsible.Trigger> <Collapsible.Content> <div>alien-bean-pasta</div> <div>wild-irish-burrito</div> <div>horse-battery-staple</div> </Collapsible.Content></Collapsible>The chevron rotates when the panel is open.
import { Collapsible } from '@highlight/ui' export default function CollapsibleBasic() { return ( <Collapsible className="w-72"> <Collapsible.Trigger>Recovery keys</Collapsible.Trigger> <Collapsible.Content className="text-foreground-secondary text-sm"> <div>alien-bean-pasta</div> <div>wild-irish-burrito</div> <div>horse-battery-staple</div> </Collapsible.Content> </Collapsible> )}Lin, Vaun, Josh
import { useState } from 'react'import { Collapsible } from '@highlight/ui' export default function CollapsibleControlled() { const [open, setOpen] = useState(true) return ( <Collapsible open={open} onOpenChange={setOpen} className="w-72"> <Collapsible.Trigger showIcon={false} className="text-foreground-secondary text-sm"> {open ? 'Hide' : 'Show'} attendees </Collapsible.Trigger> <Collapsible.Content className="text-foreground-secondary text-sm"> <div>Lin, Vaun, Josh</div> </Collapsible.Content> </Collapsible> )}The root, then any compound sub-components. Every part accepts className and forwards the rest of its props to the element or Base UI part beneath it.
Collapsible- Base UI Collapsible.Root. Owns open state; holds the trigger and the panel.
Collapsible.Trigger- Button that toggles the panel. showIcon hides the chevron; iconClassName styles it.
Collapsible.Content- The panel. innerClassName styles the wrapper around children.