Paper Peel React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import PaperPeel from "./PaperPeel";

export default function Example() {
  return (
    <PaperPeel
      front={"A little curiosity."}
      back={"Goes a long way."}
      frontBackground={"#ddd2be"}
      backBackground={"#62536e"}
      frontColor={"#302b28"}
      backColor={"#f7f0ff"}
      peelSize={75}
      minHeight={340}
      borderRadius={16}
      frontLabel={"Take a peek"}
      backLabel={"Again"}
      style={{
        "fontSize": 44,
        "fontWeight": 500,
        "letterSpacing": "-.055em",
        "lineHeight": 1.05
      }}
      undersideColor={"#f3ead7"}
      curlRadius={55}
      duration={1400}
    />
  );
}

Using Paper Peel

Provide separate front and back content, then use peeled with onPeel to control the reveal from your application.

curlRadius and undersideColor shape the visible paper curl. minHeight should allow enough room for both faces and their content.

Props

Name	Type	Required	Default	Description
front	ReactNode	No	undefined	Any React node for the front face.
back	ReactNode	No	undefined	Any React node for the revealed face.
peeled	boolean	No	undefined	Optional controlled open state.
defaultPeeled	boolean	No	false	Initial open state when uncontrolled.
onPeel	function	No	undefined	Called with the requested open state.
frontBackground	string	No	"#ddd2be"	Front face background.
backBackground	string	No	"#62536e"	Back face background.
frontColor	string	No	"#302b28"	Front face and trigger text colour.
backColor	string	No	"#f7f0ff"	Back face and trigger text colour.
undersideColor	string	No	"#f3ead7"	Colour of the lifted paper underside.
curlRadius	number	No	55	Curl depth in pixels, capped to fit the card.
duration	number	No	1400	Duration of a full peel in milliseconds. Reduced-motion users switch faces without animation.
peelSize	number	No	65	Fold size in pixels, clamped from 24 to 120.
minHeight	number \| string	No	300	Minimum height in pixels or a CSS length. The component can fill a taller parent.
borderRadius	number	No	16	Container corner radius in pixels.
frontLabel	string	No	"Peel"	Button label to reveal the back.
backLabel	string	No	"Return"	Button label to restore the front.
className	string	No	""	Additional CSS classes, merged with the component styles.
style	CSSProperties	No	undefined	Inline styles for caller-defined sizing and visual overrides.

Related components

Envelope Card

Cards

A paper flap lifts in 3D as a message slides out of its envelope.

Receipt Card

Cards

A lightly textured receipt pairs precise item rows with a torn paper edge.

Hanging Card

Cards

A suspended badge swings naturally after you drag and release its handle.

Foil Card

Cards

Fine metallic grooves catch a shifting iridescent pointer highlight.

Category: Cards

Cards React Animation