Task bubbles rain down, pile up on the headline and drain away when you switch range.
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/celebration-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 { useState } from "react";4import { CelebrationCard } from "@/components/nextui/celebration-card";56export function Example() {7const [range, setRange] = useState("month");89return (10<CelebrationCard11heading="You shipped"12suffix="features 🚀"13message="Great month for the team."14ranges={[15{ id: "month", label: "This month", count: 12 },16{ id: "year", label: "This year", count: 48 },17]}18value={range}19onValueChange={setRange}20/>21);22}
| Prop | Type | Default | Description |
|---|---|---|---|
| ranges | CelebrationRange[] | Today (21), This week (34) | Tabs with an id, label and count; the count sets the number and the bubbles |
| value | string | – | Selected range id (controlled) |
| defaultValue | string | first range id | Initially selected range id (uncontrolled) |
| onValueChange | (id: string) => void | – | Called when a tab is picked |
| heading | ReactNode | "You completed" | Heading text before the count |
| suffix | ReactNode | "tasks 🎉" | Text after the count |
| message | ReactNode | "Well done! Keep it up, see you tomorrow." | Line under the heading |
| icons | LucideIcon[] | 16 lucide icons | Icons on the bubbles, cycled in order |
| 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.