Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Storefront blocks

Pro

Product Customizer Storefront Block for React

A drawn monogram preview for a leather card holder: up to three letters uppercased as you type, a face group (Serif, Sans, Mono), leather and thread in greys, and a price that adds an engraving surcharge in integer cents only while there are letters.

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

Let people see their own letters on a product before they buy it with this product customizer for React with Base UI. A header introduces Pennick & Rook, a maker of small leather goods. In a hairline frame with a plus mark on each corner, the card holder is drawn large in an inset frame at the start. In the side cell, an Input takes up to three letters, uppercased and limited as you type with a count like 2 of 3; a ToggleGroup picks the face; two groups of grey swatches pick the leather and the thread. The drawing writes the letters in that face and thread on that leather. The price lines show the holder, the engraving (none, or a surcharge, only while there are letters) and the total, and the Shine Button adds it. A thread that matches the leather is called out. It suits personalised goods, gifts and print-on-demand.

FAQ

How do I change the product, faces and colours?

Edit HOLDER and ENGRAVING (cents), FACES (a name and a font class), LEATHERS and THREADS (a name and a grey step). The drawing in Preview reads those and the letters; replace it with your own artwork or a photograph with a text overlay if you prefer.

What happens when I type something that is not a letter?

It is dropped. The field keeps only A to Z, uppercased, at most three, and a short message under it says Letters A to Z only. The count beside the label follows what is kept.

How is the price worked out?

The holder price, plus the engraving surcharge only when there is at least one letter, in integer cents and formatted once. Clearing the field removes the surcharge and the line says None.

What stays local in the demo?

Nothing is engraved, saved or bought, and the bag count lives in the page. To wire it, send the letters, the face, the leather and the thread from add to your cart or to your engraving service, and validate the letters again on your server.

How does it look on a phone?

The drawing comes first, square, and the controls stack under it: the field, the faces, the swatches, the price lines and the full-width button.

Is it accessible?

The field has a visible label and an error that is read with it, the faces and swatches are named groups, the drawing is hidden from screen readers while a caption under it says the same in words, and the status line is a polite live region present from the start.

All 100 storefront blocks