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.

Import

Source: packages/ui/src/components/collapsible

tsx

import { Collapsible } from '@highlight/ui'

Basic

The chevron rotates when the panel is open.

tsx

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/70 text-sm">
        <div>alien-bean-pasta</div>
        <div>wild-irish-burrito</div>
        <div>horse-battery-staple</div>
      </Collapsible.Content>
    </Collapsible>
  )
}

Controlled, no icon

Lin, Vaun, Josh

tsx

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/70 text-sm">
        {open ? 'Hide' : 'Show'} attendees
      </Collapsible.Trigger>
      <Collapsible.Content className="text-foreground/70 text-sm">
        <div>Lin, Vaun, Josh</div>
      </Collapsible.Content>
    </Collapsible>
  )
}

Parts

Compound sub-components. Every part accepts className and forwards the rest of its props to Base UI.

Collapsible.Trigger: Button that toggles the panel. showIcon hides the chevron; iconClassName styles it.
Collapsible.Content: The panel. innerClassName styles the wrapper around children.