Feature card with rows of style tags drifting in alternating directions behind faded edges, above a short headline.
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/marquee-card
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 { Moon, Palette, Sparkles, Type } from "lucide-react";4import { StyleMarqueeCard } from "@/components/nextui/marquee-card";56export function Example() {7return (8<StyleMarqueeCard9title="Pick a vibe"10description="Choose a few moods and we will theme the whole kit for you."11hoverSpeed={0.4}12rows={[13{ duration: 30, offset: "-10%", tags: [{ label: "Dark", icon: Moon }, { label: "Serif", icon: Type }] },14{ duration: 36, offset: "-20%", tags: [{ label: "Colourful", icon: Palette }, { label: "Sparkly", icon: Sparkles }] },15]}16/>17);18}
| Prop | Type | Default | Description |
|---|---|---|---|
| rows | StyleMarqueeRow[] | 5 rows of style tags | Marquee rows: tags (label + icon), loop duration in seconds and a start offset; rows alternate direction |
| title | string | "Find Your Look" | Heading under the marquee |
| description | string | "Mix a few moods and every component restyles itself to match your brand." | Text under the heading |
| hoverSpeed | number | 0.25 | Playback speed while hovered (1 = normal) |
| 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.