Collapsible

Grade 5 — a writ. Ashfall Reach, eleven days out from Thornmarch.

Usage

import {
  Collapsible,
  CollapsibleContent,
  CollapsibleIndicator,
  CollapsibleTrigger,
} from "@kanzo-tech/ui";

<Collapsible defaultOpen>
  <CollapsibleTrigger asChild>
    <Button variant="outline">Toggle details</Button>
  </CollapsibleTrigger>
  <CollapsibleContent>…</CollapsibleContent>
</Collapsible>

CollapsibleContent puts your className on an inner wrapper, not on the animating element — padding and margins on the content therefore do not fight the height transition.

Anatomy

<Collapsible>
  <CollapsibleTrigger>
    <CollapsibleIndicator />   ← optional chevron
  <CollapsibleContent>
    <div className={…}>        ← your className lands here

Give collapsedHeight and the closed state keeps that much visible instead of hiding everything — a "read more". Since the content must exist to be measured, this mode also forces lazyMount and unmountOnExit off.

The quarry has opened onto something. Ashfall Reach, grade 5 — a writ, and no hall signs a writ without its seal and a written heir. The party is five, borrowed across four charters: Halla Grieve, Ludmila Vrána, Yusra Halim, Faisal Amari and Cuthbert Lyle.

Basilisks keep to quarries and cut stone. Yusra is the cantor, so the wards are hers; no open flame below the second gallery under any circumstances. They are afield, and no word is expected before the due date.

API Reference

Prop	Type	Default
`collapsedHeight`	`number \| string`	—
`lazyMount`	`boolean`	`true` (forced `false` with `collapsedHeight`)
`unmountOnExit`	`boolean`	`true` (forced `false` with `collapsedHeight`)

open, defaultOpen, onOpenChange and disabled are Ark's Collapsible.Root. useCollapsible re-exports Ark's useCollapsibleContext.

Collapsible

Usage

Anatomy

With indicator

Partial collapse

API Reference

On this page