Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Storefront blocks

Pro

Gift Wrap Storefront Block for React Aria

A gift wrap chooser with a drawn parcel that re-wraps live: three papers, three ribbons, a message on a hanging tag with a 150-character counter, a gift receipt switch and a price worked out in cents.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Offer wrapping the way a gift shop would, with this chooser for React with React Aria. A header names the shop. In a hairline frame with a plus mark on each corner, the start cell is a drawn parcel in the paper and ribbon you chose (Kraft, Ink or Linen; Twine, Satin or Velvet, all grey steps with names) with a tag that shows your message as you type and a small receipt slip that appears when the gift-receipt Switch is on, over a price list worked out in whole cents. The side cell holds the controls: two native radio groups with a swatch each, a Textarea with a 150-character counter, and the Switch. Add wrap for the price is the one Shine Button. Built from Switch, Textarea, Field, Shine Button and Guides, with a CSS entrance only. For gift shops, florists and any store with a gift option.

FAQ

How is the price worked out?

The wrap is BASE_CENTS plus the chosen paper's cents plus the chosen ribbon's cents, and the total adds the gift's price. Every figure is in whole cents and formatted in one usd helper; the price list and the button label read the same number.

How is the parcel drawn?

It is plain CSS boxes: a body in the paper's fill, a lid, a ribbon strip each way, two bow loops and a tag. The fills are mixes of the foreground colour, so it follows the theme. Replace Parcel with an image of your own wrap when you have one.

What happens to the message?

It is capped at 150 characters, shown live on the tag (a placeholder when empty) and counted under the box. Long words wrap and the tag keeps four lines.

What does the gift receipt switch do?

It shows a small slip on the drawing and adds it to the caption. Gift receipts carry no prices; define that in your own order flow.

What stays local, and how do I wire it?

The choice lives in the page and Add wrap only sets the status line to Added to the order in this demo. To wire it, send the paper id, the ribbon id, the message and the receipt flag as line item properties in your cart.

Is it accessible?

Papers and ribbons are native radio groups with legends, the swatches are decorative, the caption under the drawing says the choice in words, and one polite status line reports the result.

All 100 storefront blocks