Collapse installs into your project as a file you own. It takes the same props as Ant Design's Collapse and adds a ref, marked antuikit in the API table below. The expand arrow comes from AntuikitProvider, drawn with your icon pack, and your own expandIcon replaces it.
Install
npx antuikit@latest init
npx antuikit@latest add collapse
The first command sets up AntuikitProvider and the theme, and the second adds this component.
Import
Import from @/components/ui/collapse, the file the install added to your project, never from antd.
import { Collapse } from "@/components/ui/collapse"
The axes
The props that take a fixed set of values. They match the Design tab's Figma properties.
expandIconPlacement takes start (the default) or end. It replaces expandIconPosition, with the same values.
size takes small, medium or large. middle still works as the older name for medium. Compact mode makes all three tighter.
collapsible takes header, icon or disabled, and sets the trigger area for every panel unless an item sets its own. Unset, the whole header toggles. Use icon when the header holds its own controls, like a checkbox, a link or a menu, so clicking them does not toggle the panel.
Flags
Four booleans. Two of them set the frame, which other components do with a variant prop.
accordion keeps one panel open at a time. It also changes the roles to tablist, tab and tabpanel without the keyboard support those roles promise.
destroyOnHidden unmounts a closed panel's body instead of hiding it. It replaces destroyInactivePanel.
bordered (default true) and ghost give three frames between them: a bordered box, borderless with only the lines between panels, and ghost with no frame, fill or lines.
Use ghost when you style the panels yourself, because it clears the item borders without !important.
Slots
expandIcon has to be a function. A plain node type-checks but is ignored, and the default arrow shows instead. Pass a function of isActive:
The default arrow rotates a quarter turn when a panel opens, and mirrors itself in right-to-left layouts. A custom icon should change with isActive too.
Each item has two more slots. extra puts a node at the end of the header, inside the button that toggles the panel, so call event.stopPropagation() in any control you put there. label is the title itself, and an Icon in it lines up with the text on its own.
Events
onChange
Styling
classNames and styles take the same keys, one per part. Use them before a descendant selector, because a part with a key keeps its name across updates.
1
<Collapse
2
classNames={{
3
root: "…",
4
header: "…",
5
title: "…",
6
body: "…",
7
icon: "…",
8
}}
9
/>
A Tailwind class on one of these keys overrides the default style without !important. Setting a component token's CSS variable on the root has no effect, so style the part here or change the token in your theme.
API Reference
Collapse
Collapse's props. Rows marked antuikit in the Version column are added by the kit.