FlipFlow

A looping flow of flip cards with smooth motion and subtle interactive effects.

Installation

npx shadcn@latest add @scrollxui/flipflow

Usage

import { FlipFlow } from '@/components/ui/flipflow';
const keyData = [
  { name: 'SCROLLX UI' },
  { name: 'SCROLLX UI' },
  { name: 'SCROLLX UI' },
  { name: 'SCROLLX UI' },
  { name: 'SCROLLX UI' },
  { name: 'SCROLLX UI' },
];

<FlipFlow data={keyData} cardClassName='h-20 w-48' />

API Reference

FlipFlow

A looping flow of flip cards with smooth motion and subtle interactive effects.

Props

Property	Type	Default	Description
`data`	Array<{ name: string }>	`required`	Array of card objects to render inside the flow.
`name`	string	`required`	Text displayed on both the front and back of each flip card. Used inside the data object.
`className`	string	`-`	Additional CSS classes applied to the FlipFlow container.
`cardClassName`	string	`-`	Additional CSS classes applied to each flip card.
`colors`	string[]	`preset gradients`	Gradient background classes applied to the front side of cards. Cycles through the array.
`backColors`	string[]	`preset gradients`	Gradient background classes applied to the back side of cards. Cycles through the array.