# Scroll to top
Scroll to top is a neobrutalist React component from Cruise UI. A square button in a bottom corner that appears on long pages and takes you, and your keyboard focus, back to the top.
Install (with the @cruiseui registry in components.json, see Installation):
```bash
npx shadcn@latest add @cruiseui/scroll-top
```
Import: `import { CruiseScrollTop } from "@/components/cruise/scroll-top";`
## When to use
Long pages: docs, feeds, component galleries.
## When not to
Short pages that fit in two screens, or as a replacement for good navigation.
## Usage
- Put first in (or pass targetId), so focus has somewhere to land.
- Use one per page. It moves up above a toast stack in the same corner.
## Example (React)
```tsx
"use client";
import { CruiseScrollTop } from "@/components/cruise/scroll-top";
export default function ScrollTopExample() {
return (
Scroll down this page: a labelled button appears bottom-left after 300px.
{/* Once per page. Put first in . */}
);
}
```
## HTML
Needs theme.css (https://cruiseui.dev/theme.css).
```html
…
```
## Props: CruiseScrollTop
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `position?` | `"bottom-left" \| "bottom-right"` | `"bottom-right"` | — |
| `offset?` | `number` | `16` | Distance from the screen edges, in px (the safe area is added). |
| `showAfter?` | `number` | `600` | Pixels scrolled before it appears. |
| `label?` | `string` | — | Optional text next to the icon, e.g. "Top" (the name stays "Back to top"). |
| `targetId?` | `string` | `"top"` | id of the element that gets focus at the top (give it tabIndex={-1}). |
| `className?` | `string` | — | — |
## Accessibility
- A real