Peel Seal

New

A tamper seal you peel back to reveal what is underneath

$ npx @hritik-sharmaa/repeat-ui add card-peel-seal
Category
Card
Added
Nov 2, 2026
Version
1.1.0
Packages
motion
Flavors
TS · JS · Tailwind · CSS
Live preview
Welcome gift20% offCode: REPEAT-26

Sealed

Peel from the corner to open

Pull
Customize
340px
200px
18px
0.45
import CardPeelSeal from "@/components/repeat-ui/card-peel-seal/preview";

<CardPeelSeal
  label="Sealed"
  sublabel="Peel from the corner to open"
  pullText="Pull"
/>

Installation

  1. Run the command

    Adds the files and installs any packages they need. Works with npm, pnpm, yarn and bun.

    $ npx @hritik-sharmaa/repeat-ui add card-peel-seal --variant ts-tailwind

  2. Use it

    The files are in components/repeat-ui/card-peel-seal/.

    import CardPeelSeal from "@/components/repeat-ui/card-peel-seal/preview";

export default function Page() {
  return <CardPeelSeal />;
}

Props

PropTypeDefaultDescriptionOptions
childrenReactNode-What the seal covers, revealed once it is peeled.-
widthnumber340Width in pixels.-
heightnumber200Height in pixels.-
corner"bottom-right" | "bottom-left" | "top-right" | "top-left""bottom-right"The corner that peels.bottom-right | bottom-left | top-right | top-left
labelstring"Sealed"Main text on the seal.-
sublabelstring"Peel from the corner to open"Small text under the label.-
pullTextstring"Pull"Text beside the arrow in the corner.-
colorstring"#f4f4f2"Seal colour.-
backColorstring"#dcdad3"Colour of the seal's paper back, seen as it folds.-
textColorstring"#18181b"Text colour.-
accentColorstring"#fa5f1b"Icon and tab colour.-
radiusnumber18Corner radius in pixels.-
thresholdnumber0.45How far the corner must be pulled before it comes off, as a share of the diagonal.-
hintbooleantrueLift the corner now and then, to show it can be pulled.-
resealablebooleantrueShow a Reseal button once it is off.-
onPeel() => void-Called when the seal comes off.-
classNamestring""Extra classes for the root element.-

More card

See all
3d CardInteractive 3D card with hover tilt effects
Pricing CardElegant pricing plan showcase card
Profile CardBeautiful user profile display card