ComponentsDot Morph Button

Dot Morph Button

A pill-shaped button with a dot that morphs into a checkmark on click, featuring smooth Framer Motion animation.

Code

1

Install with shadcn Beta

Terminal

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

Or install the demo

Terminal

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

How to use

Demo.tsx

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

export default function DotMorphButtonDemo() {
  return (
    <div className="flex min-h-[200px] flex-col items-center justify-center gap-6">
      <DotMorphButton label="Dot-Morph" />
    </div>
  )
}

Props

PropTypeDescription
labelstringButton label text.
onClick?() => voidOptional click handler.
className?stringOptional additional class names for the button.
Phototab
A configurable tabbed photo display component with animated tab transitions, supporting custom icons and images
Clip Corners Button
A rectangular button with clipped corners that animate outward on hover.