Skip to content
← Component pinboard

signature primitive

StickerStack

Navigate a bounded stack without rendering the whole collection.

alpha@scout-ui/react
Live · bounded

StickerStack preview

01Start with one loud idea.
CodeAI Prompt · M15

Deterministic React output

Generated code

Plain TSX ready
"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>
      )}
    />
  );
}

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

Usage

Start with semantic content, then add the smallest expressive treatment the surrounding interface can support.

API

The public alpha surface is frozen. This page uses the same typed configuration definition as the full playground while keeping reference documentation in the reading flow.

Accessibility

Native semantics, visible focus, reduced motion, forced colors, and touch-safe interaction are release requirements—not optional examples.

Performance

High-frequency visual progress stays outside React state. This page hydrates only its navigation, utilities, and bounded preview.

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 Scout UI on GitHub ↗