ComponentsButton Copy

Button Copy

This component is an interactive button that visually changes state when clicked. The states are 'idle', 'loading', and 'success', represented by animated icons. When clicked, the button transitions from idle to loading and then to success, using smooth animations.

Code

Install with shadcn Beta

Terminal

npx shadcn@latest add "https://smoothui.dev/r/button-copy.json"

Or install the demo

Terminal

npx shadcn@latest add "https://smoothui.dev/r/button-copy-demo.json"

How to use

Demo.tsx

"use client"

import React from "react"

import ButtonCopy from "@/components/smoothui/ui/ButtonCopy"

const ButtonCopyDemo = () => {
  return (
    <ButtonCopy
      onCopy={async () => {
        await navigator.clipboard.writeText("Hello from ButtonCopy!")
      }}
    />
  )
}

export default ButtonCopyDemo

Props

Prop	Type	Default
onCopy?	() => Promise<void> \| void	-
idleIcon?	ReactNode	-
loadingIcon?	ReactNode	-
successIcon?	ReactNode	-
className?	string	-
duration?	number	-
loadingDuration?	number	-
disabled?	boolean	-

User Account Avatar

Component that displays a user's avatar and allows the user to edit their profile information and order history.

Matrix Card

A reusable card component that displays a matrix rain effect on hover, combining smooth animations with canvas-based effects.