ComponentsClip Corners Button

Clip Corners Button

A rectangular button with clipped corners that animate outward on hover.

Code

Install with shadcn Beta

Terminal

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

Or install the demo

Terminal

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

How to use

Demo.tsx

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

export default function ClipCornersButtonDemo() {
  return (
    <div className="flex min-h-[200px] flex-col items-center justify-center gap-6">
      <ClipCornersButton>CLIP-CORNERS</ClipCornersButton>
    </div>
  )
}

Props

Prop	Type	Description
children	React.ReactNode	Button label or content.
onClick?	() => void	Optional click handler.
className?	string	Optional additional class names for the button.

Dot Morph Button

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