Scroll
Fixed “back to top” control for long pages. Uses window scroll; fades in after a threshold. Customize tone, size, icon, and buttonClassName / iconClassName for full control.
Preview
import { Scroll } from "@/registry/scroll";
export function ScrollDemo() {
return (
<div className="flex flex-wrap items-center justify-center gap-4">
<Scroll mode="inline" size="md" ariaLabel="Icon button" />
<Scroll
mode="inline"
variant="label"
label="Back to top"
ariaLabel="Label variant"
/>
</div>
);
}
Installation
pnpm dlx @arrowui/cli@latest add scrollUsage
import { Scroll } from "@/registry/scroll";<Scroll position="right" showAfter={400} tone="primary" />Use mode="inline" only for static previews (e.g. docs); default mode="fixed" pins the control to the viewport and listens to window scroll.
Examples
Size
import { Scroll } from "@/registry/scroll";
export function ScrollDemoSize() {
return (
<div className="flex flex-wrap items-center justify-center gap-3">
<Scroll mode="inline" size="sm" ariaLabel="Small" />
<Scroll mode="inline" size="md" ariaLabel="Medium" />
<Scroll mode="inline" size="lg" ariaLabel="Large" />
</div>
);
}
Color
Preset tone values map to theme colors. Combine with buttonClassName when you need arbitrary palettes.
import { Scroll } from "@/registry/scroll";
export function ScrollDemoColor() {
return (
<div className="flex flex-wrap items-center justify-center gap-3">
<Scroll mode="inline" tone="default" ariaLabel="Default" />
<Scroll mode="inline" tone="primary" ariaLabel="Primary" />
<Scroll mode="inline" tone="secondary" ariaLabel="Secondary" />
<Scroll mode="inline" tone="destructive" ariaLabel="Destructive" />
</div>
);
}
Icon
Pass any icon object from @hugeicons/core-free-icons (same format as HugeiconsIcon). You can also use other icon libraries, just update the icon in the render and the import in registry/scroll.tsx.
import {
ArrowUpBigIcon,
ArrowUpDoubleIcon,
ArrowUp02Icon,
ArrowUp01Icon,
} from "@hugeicons/core-free-icons";
import { Scroll } from "@/registry/scroll";
export function ScrollDemoIcon() {
return (
<div className="flex flex-wrap items-center justify-center gap-3">
<Scroll mode="inline" icon={ArrowUpBigIcon} ariaLabel="Arrow up big" />
<Scroll
mode="inline"
icon={ArrowUpDoubleIcon}
ariaLabel="Arrow up double"
/>
<Scroll
mode="inline"
icon={ArrowUp02Icon}
ariaLabel="Arrow up in circle (outline style 2)"
/>
<Scroll
mode="inline"
icon={ArrowUp01Icon}
ariaLabel="Arrow up in circle (outline style 1)"
/>
</div>
);
}
Custom styling
Override with buttonClassName and iconClassName (Tailwind or your own classes).
import { Scroll } from "@/registry/scroll";
export function ScrollDemoCustom() {
return (
<div className="flex flex-wrap items-center justify-center gap-4">
<Scroll
mode="inline"
tone="default"
ariaLabel="Custom amber"
buttonClassName="rounded-md border-amber-500/60 bg-amber-500/15 text-amber-950 hover:bg-amber-500/25 dark:text-amber-100"
iconClassName="text-amber-600 dark:text-amber-400"
/>
<Scroll
mode="inline"
variant="label"
label="Up"
ariaLabel="Custom violet"
buttonClassName="rounded-full border-violet-500/50 bg-violet-600 text-white shadow-violet-500/25 hover:bg-violet-500"
iconClassName="text-white"
/>
</div>
);
}