A deck of soft social carousel posts with an inner panel, a visual, a page index and a like, comment, share and bookmark row: the front card swings out to the left as the next one steps up, by timer, swipe or arrows.
Set your access key from API keys as NEXTUI_TOKEN in .env.local and add the @nextui namespace below to components.json once. Then every item installs by name. Each install counts as a copy on a free account.
$pnpm dlx shadcn@latest add @nextui/swipe-deck
1{2"registries": {3"@nextui": {4"url": "https://nextui.dev/r/{name}.json",5"headers": { "Authorization": "Bearer ${NEXTUI_TOKEN}" }6}7}8}
1"use client";23import { SwipeDeck } from "@/components/nextui/swipe-deck";45export function Example() {6return (7<SwipeDeck8interval={2800}9hint="Swipe"10items={[11{ title: "Designing with depth", subtitle: "Five quiet ways to add volume without adding clutter.", visual: "sphere" },12{ title: "Palettes for autumn", subtitle: "Warm neutrals that pair with a single bold accent.", visual: "swatches" },13{ title: "Tools on our desk", pill: "12 picks inside", visual: "window" },14{ title: "Your own visual", subtitle: "Any node works in the middle.", visual: <img src="/cover.png" alt="" className="h-28 rounded-xl" /> },15]}16/>17);18}
| Prop | Type | Default | Description |
|---|---|---|---|
| items | SwipeDeckItem[] | seven design tips | Posts in the deck, each with a title, an optional subtitle or pill, and a visual; titles must be unique |
| interval | number | 2800 | How long each card stays in front, in ms; pauses on hover and while dragging |
| hint | string | "Swipe" | Label next to the arrow in each card's bottom right corner |
| onActiveChange | (index: number) => void | – | Called with the index of the card that moved to the front |
| className | string | – | Extra class on the root |
Sign in to see the code
Preview it freely. A free account copies code and prompts a few times a day.