} code={{ title: "fadeUpText", language: "tsx", content: ` import { useEffect, useState } from "react"; import FadeUpText from "."; export function FadeUpTextPreview() { const texts = ["Aura", "Creative", "Animated"]; const [currentIndex, setCurrentIndex] = useState(0); useEffect(() => { const interval = setInterval(() => { setCurrentIndex((prevIndex) => (prevIndex + 1) % texts.length); }, 1000 * 2); return () => clearInterval(interval); }, []); return ; } `, }} /> # Base Component > Copy and paste the following base component in your project\ > Make sure to install all the required dependencies ```tsx title="basic.tsx" showLineNumbers=true import { AnimatePresence, motion } from "framer-motion"; import React from "react"; import { twMerge } from "tailwind-merge"; interface Props { text: string; className?: string; } const FadeUpText: React.FC = ({ text, className }) => { return ( {text} ); }; export default FadeUpText; ``` # Component Props
## Required Props ## Optional Props # Component Examples } code={{ title: "Animated Voting button", language: "tsx", content: ` export function VoteButtonExample() { const [isLoading, setIsLoading] = useState(false); const [isSubmitted, setIsSubmitted] = useState(false); const handleVote = () => { if (!isSubmitted) { setIsLoading(true); setTimeout(() => { setIsSubmitted(true); setIsLoading(false); }, 2000); } }; const getButtonText = () => { if (isSubmitted) return "Vote Submitted!"; if (isLoading) return "Loading..."; return "Submit your vote"; }; return (

); } ` }} />

guide

featured

text

button

cards

tab

other

Mask Cursor