design-infraReport a problem or share feedback← Catalog
Card Swipe Deck
curatedtheme-awarefreesmoothui/card-swipe-deck
A CardSwipeDeck component for SmoothUI.
$
npx shadcn@latest add @smoothui/card-swipe-decknpm deps: motion
Our notes
Tinder-style swipe deck: drag past a threshold or press ←/→ to commit; Like/Nope stamps and tinted washes fade in with the drag; imperative swipeLeft/swipeRight/reset handle; aria-live announcements; reduced-motion aware. Like uses text-green from SmoothUI's tokens.json, Nope uses text-destructive; the heavy inline card shadow is tuned for light backgrounds. Labels are props. Hosted demo supplies original artwork, explicit pass/keep/reset controls and a visible result.- Source
- SmoothUI
- Kind
- component
- Categories
- card
- Use as
- drop-in — replaces your component
- Applies to
- carouselcard
- Motion
- on drag · medium · motion · medium cost · respects reduced motion
- Tags
- spring, complexity-medium
- Licence
- MIT ("MIT License — Copyright (c) 2024 Eduardo Calvo", github.com/educlopez/smoothui).
- Live demo
- Interactive preview
- Docs
- smoothui.dev
Similar
Compare all 4 →- Apple Cards Carouselaceternity/apple-cards-carouselApple-style card carousel that expands into a detail view.
- Infinite Moving Cardsaceternity/infinite-moving-cardsMarquee of testimonial/logo cards. Pause-on-hover is built in.
- Beam cardoc/beam-card♥ The user explicitly asked to keep Beam Card in the homepage examples while replacing the underwhelming loader. Retain its subtle beam emphasis.