Command Menu

Search documentation, components, and switch theme.

Atoms

Accordion

A vertically stacked set of interactive headings that reveal content.

shadcn/ui
Docs

Installation#

npx shadcn@latest add @formance/accordion

Install the following dependencies:

npm install radix-ui lucide-react

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage#

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'
<Accordion type="single" collapsible>
  <AccordionItem value="ledgers">
    <AccordionTrigger>What are Ledgers?</AccordionTrigger>
    <AccordionContent>
      Ledgers are the core data structure in Formance. They track all financial
      transactions and balances for your accounts.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="payments">
    <AccordionTrigger>How do Payments work?</AccordionTrigger>
    <AccordionContent>
      Payments represent money movements between accounts. They can be initiated
      via connectors or created manually through the API.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="wallets">
    <AccordionTrigger>What are Wallets?</AccordionTrigger>
    <AccordionContent>
      Wallets provide a higher-level abstraction over ledger accounts, enabling
      balance management, holds, and multi-currency support.
    </AccordionContent>
  </AccordionItem>
</Accordion>