Skip to content

alpha · @scout-ui/react

StickerNavbar playground

Frame a site with accessible ribbon or collage navigation.

Live · bounded

StickerNavbar preview

Navigation stays bounded inside this model.
CodeAI Prompt · M15

Deterministic React output

Generated code

Plain TSX ready
import { StickerNavbar } from "@scout-ui/react";
import "@scout-ui/react/styles.css";

const items = [
  { id: "components", label: "Components", href: "/components" },
  { id: "guides", label: "Guides", href: "/guides" },
  { id: "examples", label: "Examples", href: "/examples" },
] as const;

export default function StickerNavbarExample() {
  return (
    <StickerNavbar
      brand={<a href="/">STICK/WORK</a>}
      items={items}
      activeId="components"
    />
  );
}