Spring Element

A flexible, animated spring component that attaches a draggable element (avatar, text, icon, or any React node) to its origin with a spring line.

Made by arhamkhnz

Edit on GitHub

Open in

Installation

Usage

<SpringElement>
  <Avatar className="size-12">
    <AvatarImage draggable={false} src={USER.src} />
    <AvatarFallback>{USER.fallback}</AvatarFallback>
  </Avatar>
</SpringElement>

Note: Add draggable={false} to your element (avatar, image, etc.) when passing it as children. This prevents the browser's native drag image from interfering with the spring drag animation.

Props

SpringElement

Prop

Type

Credits

Credits to Anh for this X post as inspiration

Scroll Progress

A scroll progress component that displays the progress of the scroll.

Tabs

A set of layered sections with the same height of content—known as tab panels—that are displayed one at a time.