Back To Top

ProNew

A floating button that appears after scrolling, shows scroll progress in a ring, and returns the reader to the top.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.


pnpm dlx shadcn@latest add @tealmac-pro/back-to-top

Prop	Type	Default	Description
`threshold`	`number`	`320`	Scroll distance in pixels after which the button appears.
`container`	`RefObject<HTMLElement \| null>`	-	Scrollable element to watch and scroll instead of the page.
`showProgress`	`boolean`	`true`	Draw a ring that fills with scroll progress. Ignored when `showLabel` is set.
`focusTarget`	`string`	`"main"`	CSS selector of the element that receives focus after scrolling. Falls back to `<body>`.
`label`	`string`	`"Back to top"`	Button text and accessible name.
`showLabel`	`boolean`	`false`	Show the label next to the arrow.

Also accepts all <button> props except onClick.

The button is fixed to the bottom end corner of the viewport. Add absolute to className to place it inside a positioned container, as the demo does.
After scrolling, focus moves to focusTarget (it gets tabindex="-1" if needed), so keyboard users do not lose their place when the button disappears.
Under reduced motion the page jumps to the top instead of scrolling smoothly.

Guide and examples


pnpm dlx shadcn@latest add @tealmac-pro/back-to-top

Prop	Type	Default	Description
`threshold`	`number`	`320`	Scroll distance in pixels after which the button appears.
`container`	`RefObject<HTMLElement \| null>`	-	Scrollable element to watch and scroll instead of the page.
`showProgress`	`boolean`	`true`	Draw a ring that fills with scroll progress. Ignored when `showLabel` is set.
`focusTarget`	`string`	`"main"`	CSS selector of the element that receives focus after scrolling. Falls back to `<body>`.
`label`	`string`	`"Back to top"`	Button text and accessible name.
`showLabel`	`boolean`	`false`	Show the label next to the arrow.

Also accepts all <button> props except onClick.

The button is fixed to the bottom end corner of the viewport. Add absolute to className to place it inside a positioned container, as the demo does.
After scrolling, focus moves to focusTarget (it gets tabindex="-1" if needed), so keyboard users do not lose their place when the button disappears.
Under reduced motion the page jumps to the top instead of scrolling smoothly.