Back To Top React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Back To Top is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import BackToTop from @/components/ui/back-to-top.

import type { ReactNode } from "react"
import { BackToTop } from "@/components/ui/back-to-top"

export function GhidEFactura({ children }: { children: ReactNode }) {
  return (
    <main>
      <h1>Guide: send your first invoice in 12 steps</h1>
      {children}
      <BackToTop label="Back to the top" showOn="scroll-up" />
    </main>
  )
}

Props

• thresholddefault 400
  number

  Pixels scrolled before it appears. 0 shows it on any scroll. Content shorter than this never shows it.

• showOndefault "scroll"
  "scroll" | "scroll-up"

  scroll: whenever you are past the threshold. scroll-up: only while scrolling up past it (and at the very end), out of the way while reading down, like Safari's toolbars. The recommendation for phones.

• progressdefault true
  boolean

  A 2px ring around the button that fills with reading progress, from 12 o'clock. It follows the scroll every frame without re-rendering.

• variantdefault "surface"
  "surface" | "solid" | "glass"

  surface: the popover surface with a floating shadow, readable over anything. solid: filled with the tone. glass: a translucent blurred surface for photo-heavy pages.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  Colors the progress ring, and the fill of the solid variant.

• colordefault ""
  string

  Any CSS color. Replaces the tone for the ring and the solid fill. Leave empty to use the tone.

• sizedefault "md"
  "sm" | "md" | "lg"

  40 / 48 / 56px. A floating button never drops below 44px on touch screens, so sm grows to 44px there.

• radiusdefault "full"
  "md" | "lg" | "full"

  Corner shape, scaled with the size like the button's. The progress ring follows it.

• labeldefault "Back to top"
  string

  The accessible name, and the text of the extended pill when showLabel is on.

• showLabeldefault false
  boolean

  An extended pill with the label beside the arrow, instead of an icon-only button.

• icon
  ReactNode

  Replaces the default ArrowUp icon. It nudges up 2px on hover with a mouse.

• positiondefault "fixed"
  "fixed" | "sticky" | "absolute"

  fixed: pinned to the viewport. sticky: render it as the last child of a scroll container and it pins to that container's bottom (panels, cards, demos). absolute: inside a positioned parent.

• sidedefault "end"
  "end" | "start" | "center"

  Logical side, so end is on the left in right-to-left layouts.

• offsetdefault 16
  number

  Pixels from the edges. Added to the bottom safe area and to --bottom-bar-offset, which a bottom tab bar sets.

• smoothdefault true
  boolean

  Smooth scroll back to the top. Always instant when the user prefers reduced motion. The demo's readout shows it.

• focusTargetdefault "h1"
  string | HTMLElement | null

  Gets focus once the scroll settles: a selector looked up inside the scroll container, or an element. Falls back to the container, then the body; elements that are not focusable get a temporary tabindex. If you scroll away before the top is reached, focus stays put. null leaves focus alone.

• scrollTarget
  HTMLElement | Window | RefObject<HTMLElement | null> | null

  What scrolls. Default: the nearest ScrollContainerProvider, else (sticky and absolute) the nearest scrolling ancestor, else the window.

• onClick
  (event: MouseEvent<HTMLButtonElement>) => void

  Runs before scrolling. Call event.preventDefault() to cancel the scroll.

• classNames
  Partial<Record<"button" | "ring" | "icon" | "label", string>>

  Extra classes for the inner parts.

• className
  string

  Extra classes for the positioned wrapper. Other props go to it too.

FAQ

More React navigation components