Command Menu

Search documentation, components, and switch theme.

Atoms

Separator

Visually separates content.

shadcn/ui
Docs

Installation#

npx shadcn@latest add @formance/separator

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 { Separator } from '@/components/ui/separator'
<div>
  <div className="space-y-1">
    <h4 className="text-sm font-medium">Ledger Settings</h4>
    <p className="text-sm text-muted-foreground">
      Configure your ledger preferences and metadata.
    </p>
  </div>
  <Separator className="my-4" />
  <div className="space-y-1">
    <h4 className="text-sm font-medium">Payment Connectors</h4>
    <p className="text-sm text-muted-foreground">
      Manage connected payment providers.
    </p>
  </div>
</div>