StickerStack

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

Usage

Use Stack for a small ordered collection with stable keys, bounded visibleCount, and ordinary previous/next controls.

tsx

"use client";

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

const items = [
  { id: "shape", title: "Give the idea a shape." },
  { id: "ship", title: "Ship the bounded version." },
  { id: "learn", title: "Learn from real use." },
  { id: "repeat", title: "Keep what sticks." },
] as const;

export default function StickerStackExample() {
  return (
    <StickerStack
      items={items}
      getKey={(item) => item.id}
      renderItem={(item) => (
        <article>
          <h2>{item.title}</h2>
        </article>
      )}
    />
  );
}

Examples

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

Open the related recipe →

API

StickerStackProps<T> 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
`index`	range	`0`	Choose one of the four fixed authored demo cards.
`visibleCount`	segmented	`3`	Bound rendered layers from two to five.
`loop`	boolean	`false`	Allow navigation across collection boundaries.
`axis`	segmented	`"x"`	Choose horizontal or vertical gesture geometry.
`drag`	boolean	`false`	Add axis-locked swipe while preserving buttons.
`keyboard`	boolean	`false`	Enable documented arrow navigation on the focused stack.
`disabled`	boolean	`false`	Keep state understandable while navigation is unavailable.
`reducedMotion`	select	`"system"`	Commit direct reorder without travel.

Presets

DefaultFinite button-operated stack.
InteractiveKeyboard and drag enhancements.
VerticalA direct vertical stack with reduced motion.

Accessibility

Buttons always work. Optional arrow-key behavior applies only when the stack itself is focused and never traps normal focus movement.

Motion and reduced motion

The semantic index changes directly without travel; deterministic resting depth may remain.

Touch and small screens

Swipe is an enhancement with axis intent; perpendicular page scrolling wins before stack intent is established.

SSR and React Server Components

The leaf is client-marked because it owns state and gesture behavior. renderItem callbacks belong in a consumer Client Component.

Performance

Only visible cards plus at most one outgoing card render; drag uses refs/CSS variables and rapid navigation is synchronously gated.

Constraints

Do not use Stack for hundreds of records, primary navigation, dense forms, or content that must be simultaneously visible.

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 ↗