Command Menu

Search documentation, components, and switch theme.

Atoms

Collapsible

An interactive component that expands and collapses content.

shadcn/ui
Docs

Installation#

npx shadcn@latest add @formance/collapsible

Install the following dependencies:

npm install radix-ui

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage#

import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
<Collapsible>
  <CollapsibleTrigger>View transaction metadata</CollapsibleTrigger>
  <CollapsibleContent>
    <div className="rounded-md border p-4 text-sm">
      <p>Source: wallet:user-001</p>
      <p>Destination: account:merchant-042</p>
      <p>Reference: pay_3kF9xN2mQ</p>
    </div>
  </CollapsibleContent>
</Collapsible>