Scroll To · paneui

Plan

Tell Hark what the week looks like. It sorts the fixed points from the flexible ones.

Book

Tables, flights, appointments — held or booked, with your rules applied every time.

Relax

Reminders arrive when they are useful and not before. The rest stays off your screen.

Installation

pnpm dlx shadcn@latest add @paneui/scroll-to

Usage

import { ScrollTo } from "@/components/ui/scroll-to"

<ScrollTo to="#pricing" offset={-64}>See pricing</ScrollTo>

Examples

Variants and Sizes

Duration

Outside a Provider

Accessibility

Set focusTarget to move keyboard focus to a selector or element target after scrolling (it adds tabindex="-1" if needed). Under reduced motion the scroll jumps instead of easing.

Scrolls through Smooth Scroll. See also Scroll Progress, Scroll Reveal.

API Reference

ScrollTo

Button that eases to a target through the nearest SmoothScroll, or the window. Also accepts every prop of Button.

to*: number | string | HTMLElement; A px offset, a CSS selector or an element.
offset: number; Extra px from the target, e.g. -64 to clear a sticky header.
duration: number; Ease duration in seconds, only inside a SmoothScroll that is easing.
focusTarget= false: boolean; Move keyboard focus to a selector or element target after scrolling.
onClick: MouseEventHandler<HTMLButtonElement>; Runs before scrolling; call event.preventDefault() to cancel the scroll.
variant= "secondary": Button variant; Visual style.

Prop	Type	Default	Description
to*	number \| string \| HTMLElement	—	A px offset, a CSS selector or an element.
offset	number	—	Extra px from the target, e.g. `-64` to clear a sticky header.
duration	number	—	Ease duration in seconds, only inside a `SmoothScroll` that is easing.
focusTarget	boolean	false	Move keyboard focus to a selector or element target after scrolling.
onClick	MouseEventHandler<HTMLButtonElement>	—	Runs before scrolling; call `event.preventDefault()` to cancel the scroll.
variant	Button variant	"secondary"	Visual style.