Atoms

Card

Container component for grouping content with header, body, and footer.

shadcn/uiBased on shadcn/ui with Formance brand styling.

Create Ledger

Deploy a new ledger to your Formance stack.

Configure your ledger settings and start recording transactions.

Installation#

npx shadcn@latest add @formance/card

Install the following dependencies:

npm install class-variance-authority

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage#

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'

<Card>
  <CardHeader>
    <CardTitle>Transaction Summary</CardTitle>
    <CardDescription>Overview of recent payment activity</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Total processed: 1,024 transactions</p>
  </CardContent>
  <CardFooter>
    <p className="text-sm text-muted-foreground">Last updated 5 minutes ago</p>
  </CardFooter>
</Card>