Atoms

Popover

Displays rich content in a portal, triggered by a button.

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

Installation#

npx shadcn@latest add @formance/popover

Install the following dependencies:

npm install radix-ui class-variance-authority

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage#

import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'

<Popover>
  <PopoverTrigger>Filter transactions</PopoverTrigger>
  <PopoverContent>
    <div className="space-y-2">
      <h4 className="font-medium text-sm">Filter by status</h4>
      <p className="text-sm text-muted-foreground">
        Select which transaction statuses to display in the ledger view.
      </p>
    </div>
  </PopoverContent>
</Popover>