Sticker

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 { Sticker } from "@scout-ui/react";
import "@scout-ui/react/styles.css";

Usage

Use Sticker for object-like artwork or custom content. Official definitions preserve their intrinsic cut line; raw consumer artwork can opt into wrapper treatment.

tsx

import { Sticker } from "@scout-ui/react";
import { sunnySmile } from "@scout-ui/stickers/definitions/sunny-smile";
import "@scout-ui/react/styles.css";

export default function StickerExample() {
  return (
    <Sticker
      source={sunnySmile}
      alt={"Smiling sun sticker"}
      size="lg"
      shadow="lifted"
      rotation={-6}
    />
  );
}

Examples

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

Open the related recipe →

API

StickerProps 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
`source`	sticker	`"sunny-smile"`	Choose one approved open-source sticker definition.
`alt`	text	`"Smiling sun sticker"`	Describe meaningful artwork or leave empty when decorative.
`size`	segmented	`"lg"`	Change the named optical size without assuming SVG artwork.
`tone`	select	`"paper"`	Choose the semantic accent role.
`material`	select	`"flat"`	Select the wrapper material contract.
`outline`	select	`"none"`	Official artwork already owns its intrinsic cut line.
`shadow`	segmented	`"lifted"`	Choose no, stuck, or lifted hard depth.
`rotation`	range	`-6`	Apply bounded authored imperfection.
`intensity`	segmented	`"playful"`	Control bounded expressive amplitude.
`interactive`	boolean	`false`	Render a native button for object-like actions.

Presets

DefaultLifted official artwork.
CalmQuiet paper placement.
LoudA bounded high-energy object.

Accessibility

Static stickers never enter the tab order. An interactive Sticker renders a native button and receives normal keyboard activation.

Motion and reduced motion

The static visual remains; entrance and translation are removed while outline and hard-shadow feedback stay available.

Touch and small screens

Interactive stickers preserve the 44px target while shadow and rotation simplify on small surfaces.

SSR and React Server Components

The Sticker leaf is unmarked and server-compatible. Event handlers belong below a consumer Client Component boundary.

Performance

Rendering is one semantic wrapper plus image or child content; no engine, observer, timer, or browser-global module work is used.

Constraints

Do not replace critical text labels with unexplained artwork or apply a second default cut line to official definitions.

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 ↗