# antuikit / Collapse

> Collapse. Adds nothing beyond `className` merging through `cn()`.

Docs: https://antuikit.com/docs/components/collapse

## Install

npx antuikit@latest init
npx antuikit@latest add collapse

## Import

import { Collapse } from "@/components/ui/collapse";

## Demos

- [Basic](https://ui.antuikit.com/embed/collapse/basic.md): Pass `items` a list of panels, each with a `label` and `children`, and `defaultActiveKey` to open some of them at first.
- [Accordion](https://ui.antuikit.com/embed/collapse/accordion.md): Set `accordion` to keep at most one panel open, so opening a panel closes the one that was open before.
- [Sizes](https://ui.antuikit.com/embed/collapse/sizes.md): Set `size` to `small`, `medium` or `large` to change the header and body padding, from a dense settings list to a roomy FAQ.
- [Borderless](https://ui.antuikit.com/embed/collapse/borderless.md): Set `bordered={false}` to drop the outer frame and keep only the lines between panels, on a light fill.
- [Ghost](https://ui.antuikit.com/embed/collapse/ghost.md): Set `ghost` to remove the frame, the fill and the lines, so the panels sit on whatever surface is behind them.
- [Icon as the trigger](https://ui.antuikit.com/embed/collapse/collapsible.md): Set `collapsible="icon"` so only the arrow toggles a panel, which leaves the rest of the header free for links and controls.
- [Disabled panel](https://ui.antuikit.com/embed/collapse/collapsible-disabled.md): Set `collapsible: "disabled"` on an item to lock that one panel, or set it on the Collapse to lock all of them.
- [Custom expand icon](https://ui.antuikit.com/embed/collapse/expand-icon.md): Pass `expandIcon` a function of `isActive` to draw your own icon, like a plus that turns into a minus when the panel opens.
- [Icon at the end](https://ui.antuikit.com/embed/collapse/end-icon-placement.md): Set `expandIconPlacement="end"` to move the arrow to the end of the header, on the side opposite the label.
- [Icon in the label](https://ui.antuikit.com/embed/collapse/panel-icon.md): Put an `Icon` in an item's `label` to mark the panel next to its title, like a star or a status check.
- [Extra content](https://ui.antuikit.com/embed/collapse/extra.md): Pass an item's `extra` a node for the end of its header, like a count or an edit button, and stop its clicks from toggling the panel.
- [Hidden arrow](https://ui.antuikit.com/embed/collapse/show-arrow.md): Set `showArrow: false` on an item to hide its expand icon, and a click on the header still toggles the panel.
- [Nested](https://ui.antuikit.com/embed/collapse/nested.md): Put a `ghost` Collapse in a panel's `children` to nest a second level of panels without doubling the frame.
- [Numbered panels](https://ui.antuikit.com/embed/collapse/faq-numbered.md): Number the panels with a CSS counter in `className`, so reordering `items` renumbers them with no index in the data.
- [Card accordion](https://ui.antuikit.com/embed/collapse/card-accordion.md): Style the open item through `className` so it lifts off the page as a card, with `ghost` clearing the default lines.
- [Tinted accordion](https://ui.antuikit.com/embed/collapse/card-accordion-tinted.md): Give the open item a neutral fill and rounded corners instead of a shadow, with `ghost` clearing the default lines.
- [FAQ list](https://ui.antuikit.com/embed/collapse/faq.md): A flat FAQ with the arrows at the end and the header padding removed, so each question lines up with its answer.
- [Onboarding checklist](https://ui.antuikit.com/embed/collapse/onboarding-checklist.md): A setup checklist in accordion panels, with each group's progress in its header so the whole flow reads while the panels are closed.
- [Header as a row](https://ui.antuikit.com/embed/collapse/header-rows.md): Headers that work as rows: a checkbox over a loading body, an edit button, and a label split into a name and a total.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/collapse`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Collapse` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.