Elliot Sutton

Spring Element

Component 28

About

Here is animated Spring Element

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Spring Element to your project and fits it to your theme.

Code

How Spring Element is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { Component } from "@/components/ui/spring-element";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";

function DemoOne() {
  return (
    <div className="flex w-full h-screen justify-center items-center">
      <Component>
        <Avatar className="size-20">
          <AvatarImage
            draggable={false}
            src="https://cdn.21st.dev/assets/localized/dcbd1f440d0c95b1438a854dca3e23c7171ca4703e6d58ee91e98c159b1874c6.png"
          />
          <AvatarFallback>AK</AvatarFallback>
        </Avatar>
      </Component>
    </div>
  );
}

export default DemoOne;

Dependencies

More by Elliot Sutton

View all
  • Notification List

    Notification List

    210
  • Scroll Progress

    Scroll Progress

    137
  • Cursor

    Cursor

    126
  • Pin List

    Pin List

    108
  • Radix Dropdown Menu

    Radix Dropdown Menu

    100
  • Flip Button

    Flip Button

    96
  • Bubble Background

    Bubble Background

    92
  • Avatar Group

    Avatar Group

    83