Collapsible

A lower-level disclosure primitive for showing and hiding content with an animated expand/collapse transition.

Order #4189

Status

Shipped

const [isOpen, setIsOpen] = React.useState(false);return (<Collapsible open={isOpen} onOpenChange={setIsOpen} className="w-[350px]">  <VStack gap={2}>    <HStack className="items-center justify-between px-4">      <Heading as="h4" size="sm">Order #4189</Heading>      <CollapsibleTrigger asChild>        <IconButton variant="ghost" size="sm" aria-label="Toggle order details">          <ChevronsUpDown />        </IconButton>      </CollapsibleTrigger>    </HStack>    <HStack className="justify-between rounded-md border px-4 py-2">      <Text size="sm" color="muted-foreground">Status</Text>      <Text size="sm" weight="medium">Shipped</Text>    </HStack>    <CollapsibleContent>      <VStack gap={2}>        <div className="rounded-md border px-4 py-2">          <Text size="sm" weight="medium">Shipping address</Text>          <Text size="sm" color="muted-foreground">100 Market St, San Francisco</Text>        </div>        <div className="rounded-md border px-4 py-2">          <Text size="sm" weight="medium">Items</Text>          <Text size="sm" color="muted-foreground">2× Studio Headphones</Text>        </div>      </VStack>    </CollapsibleContent>  </VStack></Collapsible>)

Usage

import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@reva/ui";

Collapsible is the lower-level primitive behind Accordion. Use it when you need a single independently-toggled section rather than a coordinated accordion group. The expand/collapse animation reuses the shared accordion-down / accordion-up keyframes from @reva/ui/theme.css.

Composition

Use the following composition to build a Collapsible:

Collapsible
├── CollapsibleTrigger
└── CollapsibleContent

Examples

This component was added from upstream shadcn with minimal integration. Additional examples and guidance will be added in a follow-up pass.

Props

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state
`defaultOpen`	`boolean`	`false`	Initial open state (uncontrolled)
`onOpenChange`	`(open: boolean) => void`	—	Called when open state changes
`disabled`	`boolean`	`false`	Prevents the user from interacting