UI THAT STICKS.
Scout UI is the open-source sticker UI library: tactile React primitives with native semantics, bounded motion, and enough controlled chaos to make interfaces memorable.
CONTROLLED
CHAOS
Signature field guide
Interactions with rules.
Five loud ideas, each engineered to remain polite around the rest of your product.
- 01
StickerTrail
Leave a bounded, performant trail inside one intentional region.
import { StickerTrail } from "@scout-ui/sticker-trail"; - 02
StickerCursor
Add a safety-first custom pointer enhancement.
import { StickerCursor } from "@scout-ui/react"; - 03
StickerPeel
Reveal layered content with directional intent.
import { StickerPeel } from "@scout-ui/react"; - 04
StickerStack
Navigate a bounded stack without rendering the whole collection.
import { StickerStack } from "@scout-ui/react"; - 05
StickerNavbar
Frame a site with accessible ribbon or collage navigation.
import { StickerNavbar } from "@scout-ui/react";
From config to handoff
One state. Three trustworthy outputs.
Change the bounded Trail once; preview, deterministic code, and configuration-aware AI Prompt stay aligned through the M13–M15 registry.
StickerTrail preview
Deterministic React output
Generated code
import { StickerTrail } from "@scout-ui/sticker-trail";
import { sparklePop } from "@scout-ui/stickers/definitions/sparkle-pop";
import { wonkyStar } from "@scout-ui/stickers/definitions/wonky-star";
import "@scout-ui/sticker-trail/styles.css";
export default function StickerTrailExample() {
return (
<StickerTrail
stickers={[sparklePop, wonkyStar]}
spacing={{ min: 32, max: 52 }}
>
<section style={{ minHeight: 320, padding: 32 }}>
<h2>Move inside this bounded region</h2>
<p>The trail stays decorative and pointer-safe.</p>
</section>
</StickerTrail>
);
}
Works with your stack
Public React. Ordinary CSS. Your assets.
- React 19
- Next.js App Router
- CSS variables
- Consumer SVG / PNG / WebP
Production rules
Expression with an exit plan.
Native controls stay native.
Motion follows capability and preference.
High-frequency work remains bounded.
Official art stays provenance-cleared.
Built in public
Make something that sticks.
Contribute code, accessibility testing, original artwork, or clear documentation.
Alpha preflight · not yet an npm release
Make something that sticks.
pnpm add @scout-ui/reactUse the install command once a public alpha is announced. Today, inspect the packages and verified consumer fixtures in the repository.