Build · New

Collapsible

One panel that shows or hides optional detail under its title, such as fees. The most useful line stays visible; the rest opens under it.

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

SoonInstalling from the registry opens at launch. Until then the command below is what it will be.

npx shadcn@latest add @ritla/collapsible

Dependencies it brings: @base-ui/react, @phosphor-icons/react

import { Collapsible } from "@/components/ui/collapsible";

<Collapsible title="Fees and exchange rate" summary={<p>Total fee JOD 0.500</p>}>
  <p>Transfer fee JOD 0.500</p>
</Collapsible>

open and onOpenChange to control it; here it starts open, with no summary line. Use Accordion for several sections.

Prop	Type	Default	Description
`title`	`ReactNode`		Figma's Title: the trigger row's label.
`summary`	`ReactNode`		Stays visible under the title: the most useful line.
`children`	`ReactNode`		The detail that opens under the summary.
`defaultOpen`	`boolean`	`false`	Figma's Open, at first.
`open / onOpenChange`	`boolean`		Controls whether it's open.
`disabled`	`boolean`	`false`	Stops it opening or closing.

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`EnterSpace`	Opens or closes the panel.

The whole title row is the button, not only the icon, with aria-expanded and aria-controls.
The row is 48px tall. Opening and closing take 200ms, and are instant under reduced motion.
Find-in-page opens the panel when it finds the text inside.

Numerals: Amounts follow the numerals setting; format them with formatNumber. An exchange rate reads in its language's order: 1 JOD = 1.41 USD.
Arabic typography: The title is label-14 Semibold; heights are minimums.
Mixed-direction text: Values that can arrive in either language get dir="auto".