Components

BackToTop

A floating action button that scrolls the page back to the top when clicked.

Overview

BackToTop renders a fixed-position button that appears after the user scrolls past a threshold. Clicking it smoothly scrolls the page back to the top.

Usage

<BackToTop threshold={300} />

Custom Content

<BackToTop threshold={200}>
  <ArrowUp className="h-4 w-4" />
</BackToTop>

API Reference

Prop	Type	Default	Description
`threshold`	`number`	`300`	Scroll distance before showing (px)
`smooth`	`boolean`	`true`	Use smooth scrolling
`children`	`ReactNode`	Arrow icon	Custom button content

Accessibility

Button has aria-label="Back to top"
Keyboard accessible via Tab + Enter

Component	When to Use Instead
Sticky	Elements that stick during scroll
ScrollArea	Custom scrollable containers

Stepper

Guides users through a multi-step process by displaying numbered steps with completion status.

Dialog

A modal overlay that interrupts the user with important content and expects a response.