FeedbackGenerated from the public API
Collapse
Height animation for disclosure, driven by measured content rather than a fixed height.
@luc/ui/motionLive preview
Fully controlled: the caller owns `open`, so a disclosure can be driven by URL state or a parent.
The trigger is a real button with `aria-expanded` and `aria-controls`; the panel is the region it points at.
<Collapse
open={open}
onOpenChange={setOpen}
title="Fills this quarter"
description="One hundred and eighty-four, up from one hundred and two."
>
<Text variant="body">The panel is the region the trigger points at.</Text>
</Collapse>Usage
import { Collapse } from "@luc/ui/motion";<Collapse
open={open}
onOpenChange={setOpen}
title="Fills this quarter"
description="One hundred and eighty-four, up from one hundred and two."
>
<Text variant="body">The panel is the region the trigger points at.</Text>
</Collapse>API
| Export | Kind | Signature |
|---|---|---|
Collapse | 8 documented props | ({ className, open, onOpenChange, title, description, aside, children, size, variant, ...props }: CollapseProps) => import("@types/react").JSX.Element |
Collapse props
Type: CollapseProps
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
aside? | ReactNode | — | Right-aligned trigger slot (a value, a badge). |
children | ReactNode | — | |
description? | ReactNode | — | Optional second line under the trigger. |
onOpenChange? | ((open: boolean) => void) | undefined | — | Called when the reader activates the trigger. The component stays fully controlled — the caller owns `open` — so a disclosure can be driven by URL state, a keyboard shortcut or a … |
open | boolean | — | |
size? | "sm" | "md" | undefined | — | `sm` is for inline disclosures, `md` for research sections. |
title | ReactNode | — | Heading shown in the trigger. |
variant? | "card" | "plain" | undefined | — | Start the panel padded (a bordered card) or flush. |
Accessibility
The accessibility contract is the one the primitive underneath the component already honours — the platform element for a control, or the ARIA pattern the component implements — and the Showcase's own pages are scanned for violations with axe.
What happens on the server, and when hydration changes it.
Family
Feedback
A press, a change, a selection — acknowledged without shouting.
Related