A stack of contact cards with pastel icon circles: the front card drops away and tucks behind the rest, on a loop while it is on screen.
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/contact-stack
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 { Headphones, Mail, Phone } from "lucide-react";4import { ContactStack } from "@/components/nextui/contact-stack";56export function Example() {7return (8<ContactStack9interval={2400}10items={[11{ icon: Phone, title: "Call us", description: "Real people, every day." },12{ icon: Mail, title: "Write to us", description: "We reply within a day.", tone: "bg-sky-100 text-sky-600" },13{ icon: Headphones, title: "Support", description: "Help from a real person, 24/7." },14]}15onActiveChange={(i) => console.log("front card", i)}16/>17);18}
| Prop | Type | Default | Description |
|---|---|---|---|
| items | ContactStackItem[] | 5 contact cards | Cards in the stack: icon, title, description and an optional tone class for the icon circle; titles must be unique |
| interval | number | 2000 | How long each card stays in front, in ms |
| 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.