Elastic List

A scrolling list with real rubber-band edges: drag or flick past either end and it stretches with growing resistance, then springs back, pulling down from the top winds up a spinner that snaps when it's ready to refresh, and the wheel hands off to the page once you reach an end.

akapull to refresh·rubber band·overscroll

Install

Run this in any project set up for the shadcn CLI. It copies the Elastic List source into your components folder, so the code is yours to change.

npx shadcn@latest add https://devl.dev/r/elastic-list.json

Use it

Import it and render it. Every prop has a typed default, so it works straight away, and you pass your own data when you’re ready.

import { ElasticList } from "@/components/elastic-list";

export default function Page() {
  return <ElasticList />;
}

Built with

A free React motion component in the Surfaces collection, written in TypeScript with Tailwind CSS on coss ui. MIT licensed.

npm: motion

Props

Read from the Elastic List source. Everything is optional unless it says required. It also accepts Omit<ComponentProps<"div">, "onRefresh">.

Prop	Type	Default
onRefresh	() => Promise<unknown> \| unknown	—
threshold	number	64
label	string	"List"
actionsRef	RefObject<ElasticListActions \| null>	—

More in Surfaces

219

Morph Icons

Menu to close, play to pause, plus to check, sun to moon: each pair is one set of paths in two poses, so lines rotate and stretch into place on a spring and reverse cleanly mid-way.

220

Press Ripple

A quiet wave that spreads from exactly where you pressed, clipped to the element's corners, finishes filling even on a quick tap, and gives Enter and Space the same feedback from the centre.

221

Rim Light

A point of light that laps a card's border at a steady pace with a fading tail, tracing rounded corners exactly; every beam on the page shares one clock, so busy cards pulse in step.

244

Card Deal

A grid that deals itself out from one point like a hand of cards: each card flies to its slot tilted and settles flat, and a shuffle sweeps them back into the deck and deals a fresh order, even mid-flight.

Elastic List

akapull to refresh·rubber band·overscroll

Prop

Type

Default

onRefresh

() => Promise<unknown> | unknown

—

threshold

number

label

string

"List"

actionsRef

RefObject<ElasticListActions | null>

—