Someone seated against a red wall, face blurred by motion

Ember

Size

Button

Flick Cards Slider

New

A fanned deck of photo cards you flick sideways: the next card swings to the front with one elastic overshoot, the rest dim as they fan out, and the front card's button fades in last.

Install it in one line

Available in v1.9.0

npx devignerui add flick-cards-slider

Writes components/ui/flick-cards-slider.tsx and lists what it needs.

First time here

npx devignerui init

Or by hand

Needs React 18 or 19 and Tailwind CSS v4.
Install the dependencies.
npm i cn motion devignerui
Paste the source from into components/ui/flick-cards-slider.tsx.

Some of these designs take cues from interfaces we've admired around the web. If one started as your idea and you'd like credit, message us on X @devignerui or in the Discord and we'll add it.

Usage

import { FlickCardsSlider, type FlickCardsSliderItem } from "@/components/ui/flick-cards-slider";

const collections: FlickCardsSliderItem[] = [
  { image: "/collections/ember.jpg", title: "Ember", action: { label: "View collection", href: "/collections/ember" } },
  { image: "/collections/drift.jpg", title: "Drift", action: { label: "View collection", href: "/collections/drift" } },
  { image: "/collections/grain.jpg", title: "Grain", action: { label: "View collection", href: "/collections/grain" } },
  { image: "/collections/tide.jpg", title: "Tide", action: { label: "View collection", href: "/collections/tide" } },
  { image: "/collections/noir.jpg", title: "Noir", action: { label: "View collection", href: "/collections/noir" } },
];

export function Example() {
  return <FlickCardsSlider aria-label="Collections" items={collections} className="w-96" />;
}

Custom composition

<FlickCardsSlider items={products} index={index} onIndexChange={setIndex} className="w-120" />

Product drop with links

Each card links to its product page; the deck is named for screen readers.

import { FlickCardsSlider, type FlickCardsSliderItem } from "@/components/ui/flick-cards-slider";

const products: FlickCardsSliderItem[] = [
  { image: "/drops/kr90.jpg", title: "KR90", action: { label: "Get this product", href: "/shop/kr90" } },
  { image: "/drops/nv300.jpg", title: "NV300", action: { label: "Get this product", href: "/shop/nv300" } },
  { image: "/drops/lx45.jpg", title: "LX45", action: { label: "Get this product", href: "/shop/lx45" } },
];

export function Drop() {
  return (
    <section className="grid place-items-center overflow-hidden py-24">
      <FlickCardsSlider aria-label="New arrivals" items={products} className="w-80" />
    </section>
  );
}

Follow the front card

Control the index to show details for whichever card is in front.

import { useState } from "react";
import { FlickCardsSlider, type FlickCardsSliderItem } from "@/components/ui/flick-cards-slider";

export function Lookbook({ looks }: { looks: (FlickCardsSliderItem & { notes: string })[] }) {
  const [index, setIndex] = useState(0);
  return (
    <div className="flex flex-col items-center gap-10 overflow-hidden py-16">
      <FlickCardsSlider items={looks} index={index} onIndexChange={setIndex} />
      <p className="text-sm text-muted-foreground">{looks[index]?.notes}</p>
    </div>
  );
}

Every prop

items-

FlickCardsSliderItem[]

The cards, in order: { image, alt?, title?, action? }. action is { label, href?, onClick? }: a link with href, else a button.

index-

number

Controlled front card, counted from 0. Pass with onIndexChange.

defaultIndex0

number

Front card on first render when uncontrolled.

onIndexChange-

(index: number) => void

Called with the new front card after a flick or an arrow key.

classNames-

FlickCardsSliderClassNames

Slot classes: card (every photo frame), title (the centered label) and action (the button).

classNamew-72

string

Classes on the deck. Its width is the front card's width; the side cards fan out past it, and the title, button and corners scale with it.

How to use it

The live demo is a fan of five photo collections, Ember, Drift, Grain, Tide and Noir. Drag the front card sideways and the deck follows your pointer; let go past a short distance and the next card swings to the front with one overshoot while the others dim, and its View collection button fades in.

When to use it

A small set of products, drops or campaigns, three to eight, where each one is a photo with a name and one call to action.
A hero or launch section that should invite a playful drag rather than a click on arrows.

When to reach for something else

Long catalogs or anything people need to scan or compare: only the front card is readable. Use a grid.
Content that is mostly text. The cards are photos first, with a single large title over them.

Keyboard

Tab: Focuses the deck, then the front card's button.
Left arrow: Brings the card on the left to the front, looping past the first card.
Right arrow: Brings the card on the right to the front, looping past the last card.

Accessibility

The deck is a region with aria-roledescription="carousel" and the label "Cards"; pass aria-label to name it, such as "New arrivals".
Each card is a group with aria-roledescription="slide" and a label like "2 of 5". Only the front card is exposed: the others are aria-hidden and their buttons leave the tab order and take no clicks.
A polite live region reads the new front card, its title when the title is a string, after each flick or key press.
Give each item an alt when the photo carries meaning the title doesn't.
Honors prefers-reduced-motion and an ancestor <MotionConfig reducedMotion="always">, so an in-app motion switch works too.

Theming

The deck's width is the front card's width (w-72 by default) and the card is always 2:3. The title, the button and the corner radius scale with that width through container query units, so className="w-96" grows everything in proportion.
Cards one and two away from the front are dimmed by a layer of the background token at 27.5% and 52.5%. On a dark background they darken; on a light one they fade toward white.
The button uses background and foreground, the title is white over the photo. Change them through classNames.action and classNames.title.
The front card carries data-front, so classNames.card can style it alone, such as data-front:shadow-2xl.
Cards move on TWEEN_FLICK, GSAP's elastic.out(1.2, 1) over 0.6s; the dim layer and a leaving button use TWEEN_FLICK_FADE (0.2s) and the arriving button TWEEN_FLICK_REVEAL (0.7s).

Edge cases

The side cards fan out about one card width past each edge of the deck. Leave room for them, or clip the section with overflow-hidden, or a narrow page scrolls sideways.
A full flick is two deck widths of drag; letting go past a tenth of that turns the deck, anything shorter springs back. Beyond one deck width the drag meets resistance.
The deck loops in both directions. With more than five items the cards three or more away from the front are hidden and slide in as they come round.
A press that moves less than 4px is a click, so the front card's button works under the drag. A drag that starts on the button never clicks it.
On touch the deck takes horizontal drags only, so the page still scrolls vertically over it.

Troubleshooting

The page scrolls sideways on phones.

The side cards fan out past the deck's edges. Put the deck in a section with overflow-hidden, or make it narrower so the fan fits.

Dragging the deck selects text or drags the image instead.

The deck turns off text selection and native image dragging on its own cards. If you wrap it in something draggable, stop that wrapper from starting its own drag on pointerdown.

The component renders with no background or the wrong colors.

Colors use the standard shadcn/ui tokens only (background, foreground, primary, secondary, muted, accent, border, input, ring, destructive), so a project set up with shadcn/ui needs nothing extra and the component follows its theme, dark mode included. Without shadcn/ui, define those CSS variables for :root and .dark and map them in your Tailwind v4 @theme, or run npx shadcn init.

Stuck on something else? Ask in the Discord.