Deck

A Tinder-like swipeable card stack component with smooth animations.

Powered by

Motion

Lucide

Card 1

Card 2

Card 3

No more cards

Installation

npx kibo-ui@latest add deck

Features

Swipe cards left or right with touch or mouse drag
Smooth, animated transitions powered by Motion
Composable API: pass children as swipeable cards
Customizable swipe threshold, stack size, perspective, and scaling
Callbacks for swipe and swipe end events
Visual stack effect with perspective and scaling
Controlled and uncontrolled index support
Automatic card progression after swipe

Examples

Controlled Deck

Current Index: 0 | Next Direction: left

Card 1

Swipe or use buttons

Card 2

Swipe or use buttons

Card 3

Swipe or use buttons

No more cards

Comparison

A slider-based component for comparing two items in an overlay.

Dialog Stack

Composable stacked dialogs, useful for creating a wizard, nested form or multi-step process. It provides a consistent layout and styling for each dialog, and includes navigation components to move between them.