shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Offer wrapping on a product card with this gift wrap product card for React with Radix UI. A drawn greyscale scarf, its price and a Switch for "Gift wrap +$4" sit in the first band; a band under it is always in place, so turning the switch on reveals a choice of three papers (stripe, dots, plain), a Textarea for a note of up to 120 characters with a live count and a tick box to hide the price. The note is set on a drawn card whose border is the chosen paper, and the total follows. The parcel is not drawn wrapped. "Add to bag" turns into "Added" with an Undo. Guides rule the bands. For products that can be sent as a gift.
FAQ
Why does nothing move when I turn wrapping on?
The options band is always laid out. While wrapping is off its controls are invisible and inert and a line says to turn it on; turning it on only shows them.
What does the note counter do?
The box stops at 120 characters (NOTE_MAX) and the count beside it reads "37 of 120". The same text is set on the drawn card as you type.
What stays local, and how do I wire it for real?
The switch, paper, note and bag are page state. Nothing is stored, charged or sent. Send the paper id, the note and the hide-price flag with the line item to your cart and print them on the slip server-side.
