The perks section from the Group card launch page as its own block: a heading with a live countdown to the end of the offer, then three tinted perk cards where the emoji bob, the claimed count tweens up and the bar fills as crews join.
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/launch-perks
1{2"registries": {3"@nextui": {4"url": "https://nextui.dev/r/{name}.json",5"headers": { "Authorization": "Bearer ${NEXTUI_TOKEN}" }6}7}8}
1import { LaunchPerks } from "@/components/blocks/launch-perks";23export function Perks() {4return (5<LaunchPerks6title={"Open a pot,\nthe team gets lunch"}7period="Jan 5 – Feb 28"8endsAt="2027-02-28T23:59:59"9perks={[10{ emoji: "🌯", float: ["🌯", "🥑", "🌶️"], accent: "#ff7a1a", who: "First 500 teams", what: "Burrito Friday", note: "One order per team member", total: 500, claimed: 212 },11{ emoji: "☕", float: ["☕", "🥐", "✨"], accent: "#4c6fff", who: "First 2,000 teams", what: "$40 coffee fund", note: "Paid into your pot on day one", total: 2000, claimed: 1480 },12]}13/>14);15}
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Get a Potluck card,\nthe crew gets a treat" | Heading; a \n splits it into two lines |
| period | string | "Nov 3 – Dec 15" | Small line under the heading, usually the dates |
| endsAt | string | "2026-12-15T23:59:59" | When the countdown runs out, as anything Date can parse |
| perks | LaunchPerk[] | three perks | Each card: emoji, three float emoji, accent color, who, what, note, total and claimed |
| live | boolean | true | Claimed counts trickle up while a card is on screen, like crews joining live |
| className | string | – | Extra classes on the section |
Sign in to see the code
Preview it freely. A free account copies code and prompts a few times a day.