237
A referral reward that wobbles with anticipation: the bow unties, the lid pops off and lands beside it, and a credit coupon rises out in a warm glow with a few sparkles.
akagift·reward·referral
Run this in any project set up for the shadcn CLI. It copies the Gift Box source into your components folder, so the code is yours to change.
npx shadcn@latest add https://devl.dev/r/gift-box.jsonImport it and render it. Every prop has a typed default, so it works straight away, and you pass your own data when you’re ready.
import { GiftBox } from "@/components/gift-box";
export default function Page() {
return <GiftBox />;
}A free React illustration in the Celebrations collection, written in TypeScript with Tailwind CSS on coss ui. MIT licensed.
Read from the Gift Box source. Everything is optional unless it says required.
| Prop | Type | Default |
|---|---|---|
| amount | string | "$20" |
| code | string | "MIRA-20" |
| label | string | "Referral credit" |
| title | string | "You've got a reward" |
| description | string | "Mira joined with your invite link. Open it up to see what you earned." |
| openTitle | string | "$20 credit unlocked" |
| openDescription | string | "It comes off your next invoice. Share the code to give a friend the same." |
| hue | GiftBoxHue | "rose" |
| autoPlay | boolean | true |
| className | string | — |