Red Envelope Button: React + Tailwind Component

An open-the-red-envelope interaction — an idle wiggle, a click to tear it open, a rolling amount, and a burst of gold coins.

A complete open-the-red-envelope interaction: the gold-patterned red envelope wiggles gently at rest to invite a click; on click the gold “Blessing” seal twists open, the flap lifts, an amount card slides up and rolls its digits to the target amount, and gold coin emoji particles burst upward at the same time. It suits prize giveaways, red envelope draws, and festive marketing, and it can be reset and replayed.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add "https://webberui.com/r/red-envelope-button.en.json?t=<install token>"

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Amountamount

8888

Greetingblessing

Amount prefixprefix

Coin countcoinCount

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<RedEnvelopeButton/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add "https://webberui.com/r/red-envelope-button.en.json?t=<install token>"

Or, once registries are configured in components.json, install it as @webberui/red-envelope-button.

Usage

import { RedEnvelopeButton } from "@/components/ui/red-envelope-button";

<RedEnvelopeButton
  amount={6000}
  blessing="Prosperity ahead"
  onOpen={() => console.log("red envelope opened")}
/>

Props

Prop	Type	Default	Description
`amount`	`number`	—	The amount rolled into view once opened (in dollars)
`blessing`	`string`	`"Congratulations on getting rich!"`	Blessing phrase: shown vertically on the envelope cover and on the amount card
`prefix`	`string`	`"NT$"`	Amount prefix
`coinCount`	`number`	`18`	Number of gold coin particles
`onOpen`	`() => void`	—	Fires at the moment it is torn open
`className`	`string`	—	Forwarded to the outer container

Accessibility

When the user has "reduce motion" enabled at the system level, the idle wiggle and the gold coin particles are disabled and a click shows the amount directly
The envelope is a native button, openable from the keyboard with Enter / Space, with an aria-label describing the current state
The result is announced through an aria-live="polite" region reading out the amount and the blessing; decorative elements such as the flap, the seal, and the particles are all aria-hidden

Red Envelope Button