signature primitive

StickerPeel

Reveal layered content with directional intent.

alpha@scout-ui/react

Install Source ↗Report issue ↗

Live · bounded

StickerPeel preview

Peel the idea.

Code

Deterministic React output

Generated code

Plain TSX ready

import { StickerPeel } from "@scout-ui/react";
import "@scout-ui/react/styles.css";

export default function StickerPeelExample() {
  return (
    <StickerPeel
      front={
        <article>
          <h2>Front layer</h2>
          <p>Peel for the detail.</p>
        </article>
      }
      back={
        <article>
          <h2>Revealed layer</h2>
          <p>Complete semantic content.</p>
        </article>
      }
      drag
    />
  );
}

Open full playground →

Install

Scout UI is in alpha preflight and is not represented here as a public npm release. Inside the workspace, consume the frozen package contract by name.

tsx

import { StickerPeel } from "@scout-ui/react";
import "@scout-ui/react/styles.css";

Usage

Use Peel for optional secondary disclosure with a complete front and back layer—not required notices or irreversible actions.

tsx

import { StickerPeel } from "@scout-ui/react";
import "@scout-ui/react/styles.css";

export default function StickerPeelExample() {
  return (
    <StickerPeel
      front={
        <article>
          <h2>Front layer</h2>
          <p>Peel for the detail.</p>
        </article>
      }
      back={
        <article>
          <h2>Revealed layer</h2>
          <p>Complete semantic content.</p>
        </article>
      }
      drag
    />
  );
}

Examples

Inspect a complete authored setting, then adapt it without copying private implementation details.

Open the related recipe →

API

StickerPeelProps is part of the frozen alpha surface. The table below is generated from the same typed schema that powers presets, preview, Copy Code, share URLs, and Copy AI Prompt.

Prop	Control	Default	Contract
`open`	boolean	`false`	Choose the current semantic layer.
`origin`	select	`"top-right"`	Anchor the peel to one of four corners.
`peelSize`	range	`72`	Set the authored curl signal size.
`drag`	boolean	`true`	Add directional pointer drag without removing click or keyboard.
`dragThreshold`	range	`0.5`	Choose the normalized commit threshold.
`disabled`	boolean	`false`	Preserve visible state while suppressing interaction.
`reducedMotion`	select	`"system"`	Replace spatial curl travel with immediate state feedback.

Presets

DefaultTop-right peel with drag enhancement.
RevealedStable open semantic state.
Reduced travelClick/keyboard only with static motion policy.

Accessibility

The named native toggle handles Enter and Space. Focus moves before a layer becomes inert and Escape can close disclosure use.

Motion and reduced motion

The semantic open state swaps immediately without spatial curl travel.

Touch and small screens

Tap is the complete path. Drag waits for directional intent and begins pointer capture only after peel intent wins.

SSR and React Server Components

Both layers remain mounted for meaningful, size-stable server output; the leaf is a narrow Client Component for state and focus management.

Performance

Drag progress writes one CSS variable per animation frame with zero high-frequency React state; cancellation restores prior state.

Constraints

Do not hide long documents, required instructions, or actions that depend on precise dragging.

Source

Inspect the implementation and tests in the public Scout UI repository. Code uses MIT licensing; official artwork uses its separately documented asset license.

Open the public source file ↗