smooth-scroll - examples

Examples are the tab where the component is shown doing a job, not demonstrating a prop. The API tab already lists the props.

Phone22remthe floor, the narrowest this promises to work at

tanstacktanstack add https://adamjurek.com/r/tanstack/smooth-scroll.json

shadcnpnpm dlx shadcn@latest add https://adamjurek.com/r/shadcn/smooth-scroll.json

Press Compare. The frames are real viewports, so a layout that breaks at 320 breaks here too rather than in somebody's hands.

In a page

import { NavBar, SmoothScroll } from "@sushindustries/ui";

export function RootLayout({ children }: { children: React.ReactNode }) {
	return (
		<>
			<SmoothScroll />
			<NavBar brand={<span className="mono">acme</span>} entries={[]} />
			<main>{children}</main>
		</>
	);
}

tsx

What this example is not

It is not scoped to children, even though it is written beside them here. Lenis takes over the whole document's scroll no matter where in the tree SmoothScroll is mounted - putting it beside the layout's other chrome is a convenience for reading the code, not a boundary the component respects.