Runnable recipe · @scout-ui/react
A peel-to-reveal product detail
Reveal optional material information with a named button while keeping both layers mounted and size-stable.
Search terms: peel interaction, reveal, disclosure, product detail
Live example
Recycled paper field notebook
Peel for optional material details.
Source
import { StickerPeel } from "@scout-ui/react/sticker-peel";
<StickerPeel front={<Product />} back={<MaterialDetails />} />Dependencies
Install @scout-ui/react and the shared @scout-ui/react/styles.css stylesheet. Artwork may come from @scout-ui/stickers or your own source.
Accessibility contract
Tap, click, Enter, and Space provide the complete disclosure path; dragging remains optional.
Motion, touch, and adaptation
Reduced motion performs an immediate semantic swap and touch never depends on precise corner dragging.