Collapsible

Pass the button content as trigger and the revealed region as children. Use open with onOpenChange to control it.

The default indicator follows state. Pass indicator={false} to hide it or a React node to replace it.

import { Collapsible, Text } from '@manti-ui/react';

export default function CollapsibleBasic() {
  return (
    <div className="w-full max-w-[calc(var(--manti-space-16)*6)]">
      <Collapsible trigger="Show chef's note">
        <Text className="p-3 px-1 pt-3" emphasis="muted">
          Rest the dough for 30 minutes so it rolls out smooth and thin.
        </Text>
      </Collapsible>
    </div>
  );
}

API

Prop	Type	Default	Description
`trigger`	`ReactNode`	—	The content of the toggle button.
`indicator`	`ReactNode \| false`	—	Trailing indicator. Uses the state-aware Manti icon by default; pass false to hide it.
`children`	`ReactNode`	—	The collapsible content revealed when open.
`open`	`boolean`	—	Controlled open state.
`defaultOpen`	`boolean`	—	Initial open state for uncontrolled usage.
`onOpenChange`	`(open: boolean) => void`	—	Called whenever the open state changes.
`disabled`	`boolean`	—	Disable the trigger.

Styling

Anatomy

Part	Selector	Description
`root`	`[data-scope="collapsible"][data-part="root"]`	The wrapper around the trigger and content.
`trigger`	`[data-scope="collapsible"][data-part="trigger"]`	The button that toggles the disclosure.
`indicator`	`[data-scope="collapsible"][data-part="indicator"]`	The paired chevrons that identify the disclosure control.
`content`	`[data-scope="collapsible"][data-part="content"]`	The region that animates its height open and closed.

Tokens

Token	Controls
`--manti-collapsible-radius`	radius
`--manti-collapsible-padding-x`	padding x
`--manti-collapsible-padding-y`	padding y
`--manti-collapsible-gap`	gap
`--manti-collapsible-icon-size`	icon size

Last updated 13 September 2026