A stack of prompt cards that swipes the front card away and lifts the next one into place, 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/prompt-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 { BookOpen, Code, Globe, Mail, Search } from "lucide-react";4import { PromptDeck } from "@/components/nextui/prompt-deck";56export function Example() {7return (8<PromptDeck9interval={3000}10tools={[Search, Globe, Code]}11prompts={[12{ icon: Mail, title: "draft replies", prompt: "reply to the three oldest emails in my inbox", sources: [Mail, Globe, Code] },13{ icon: BookOpen, title: "summarise docs", prompt: "what changed in the API docs this week?", sources: [BookOpen, Search, Globe] },14{ icon: Search, title: "research", prompt: "find five competitors and compare pricing", sources: [Search, Globe, Code] },15]}16onActiveChange={(i) => console.log("front card", i)}17/>18);19}
| Prop | Type | Default | Description |
|---|---|---|---|
| prompts | PromptDeckItem[] | 5 design prompts | Cards in the deck: icon, title, prompt and up to three source icons; titles must be unique |
| tools | LucideIcon[] | 7 lucide icons | Small icons along the bottom of each card |
| interval | number | 2200 | How long each prompt stays in front, in ms |
| onActiveChange | (index: number) => void | – | Called with the index of the prompt 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.