Pull to refresh

Free

Pull a list down to refresh it, with a button for everyone else.

Installs components/ui/pull-to-refresh.tsxDepends on none beyond ReactMotion shared motion tokens

pnpm dlx shadcn@latest add https://caliperui.site/r/pull-to-refresh.json

Checked 0 times. Pull down, or use the refresh button.

When to use #

Use it for

Mobile lists and feeds that load newer items.
Anywhere a refresh gesture is expected.

Skip it when

The data is live; update it automatically.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/pull-to-refresh.json

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx

import { useState } from "react"
import { PullToRefresh } from "@/components/ui/pull-to-refresh"

export function InboxRefresh() {
  const [checked, setChecked] = useState(0);
  return (
    <div className="w-full max-w-sm">
      <PullToRefresh onRefresh={() => new Promise<void>((done) => setTimeout(() => { setChecked((value) => value + 1); done(); }, 900))}>
        <p className="p-4 text-sm text-muted-foreground">Checked {checked} {checked === 1 ? "time" : "times"}. Pull down, or use the refresh button.</p>
      </PullToRefresh>
    </div>
  );
}

API reference #

PullToRefresh

component

PropTypeDefault

labelstring"Pull to refresh"

onRefresh *() => void | Promise<void>—

children *ReactNode—

classNamestring—

Motion #

Transitions use the shared duration and easing tokens. Under prefers-reduced-motion those tokens collapse to instant and travel distances go to zero, so state changes still happen without movement.