Envelope Card 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 EnvelopeCard from "./EnvelopeCard";

export default function Example() {
  return (
    <EnvelopeCard
      children={"A note for you.\n\nMake something\nworth keeping."}
      defaultOpen={true}
      label={"Open envelope"}
      closeLabel={"Close envelope"}
      color={"#b8a38d"}
      paperColor={"#eee5d7"}
      inkColor={"#43372d"}
      sealColor={"#8d5b50"}
    />
  );
}

Using Envelope Card

Pass the message through children and open the envelope with its seal button. Use open and onOpenChange when another part of the page should control it.

Keep the letter concise, or let its content scroll within the reserved letter height. Closed content is inert and hidden from assistive technology, and reduced motion removes the flap and slide transitions.

Props

Name	Type	Required	Default	Description
children	ReactNode	No	undefined	Your message or letter content.
open	boolean	No	undefined	Controlled open state.
defaultOpen	boolean	No	false	Initial uncontrolled open state.
onOpenChange	function	No	undefined	Receives the requested open state.
label	string	No	"Open envelope"	Closed-state button label.
closeLabel	string	No	"Close envelope"	Open-state button label.
color	string	No	"#b8a38d"	Envelope paper colour.
paperColor	string	No	"#eee5d7"	Letter surface colour.
inkColor	string	No	"#43372d"	Letter text and focus colour.
sealColor	string	No	"#8d5b50"	Seal colour.
className	string	No	""	Additional classes on the root element.
style	CSSProperties	No	undefined	Inline styles for sizing, typography and appearance.