Command Menu

Search documentation, components, and switch theme.

Atoms

Carousel

A carousel for cycling through content.

shadcn/ui
Docs

Installation#

npx shadcn@latest add @formance/carousel

Install the following dependencies:

npm install embla-carousel-react lucide-react

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage#

import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from '@/components/ui/carousel'
<Carousel>
  <CarouselContent>
    <CarouselItem>
      <div className="p-4">
        <h3 className="font-semibold">Ledger Overview</h3>
        <p className="text-sm text-muted-foreground">Track balances across all accounts</p>
      </div>
    </CarouselItem>
    <CarouselItem>
      <div className="p-4">
        <h3 className="font-semibold">Payment Connectors</h3>
        <p className="text-sm text-muted-foreground">Connect to Stripe, Wise, and more</p>
      </div>
    </CarouselItem>
    <CarouselItem>
      <div className="p-4">
        <h3 className="font-semibold">Wallet Management</h3>
        <p className="text-sm text-muted-foreground">Create holds and manage balances</p>
      </div>
    </CarouselItem>
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>