Fade In Button

PreviousNext

Button with fade-in entrance animation

Docs
animbitscomponent

Preview

Loading preview…
registry/new-york/animations/buttons/fade-in.tsx
"use client";
import { motion, type HTMLMotionProps } from "motion/react";
import {
  fadeInVariants,
  createDelayedTransition,
} from "@/lib/animation-presets";
interface FadeInButtonProps extends Omit<HTMLMotionProps<"button">, "animate"> {
  children: React.ReactNode;
  delay?: number;
  duration?: number;
}
export function FadeInButton({
  children,
  delay = 0,
  duration = 0.3,
  ...props
}: FadeInButtonProps) {
  return (
    <motion.button
      variants={fadeInVariants}
      initial="hidden"
      animate="visible"
      transition={createDelayedTransition(delay, duration)}
      {...props}
    >
      {children}
    </motion.button>
  );
}

Installation

npx shadcn@latest add @animbits/buttons-fade-in

Usage

import { ButtonsFadeIn } from "@/components/buttons-fade-in"
<ButtonsFadeIn />