Skip to main content

​
Build your first component

This guide will walk you through creating your first ForgeUI component - an animated text shimmer effect that’s perfect for headings, CTAs, or any text you want to draw attention to.
1

Ensure dependencies are installed

Make sure you’ve completed the installation guide and have all required dependencies installed:
  • React 19.0+
  • Framer Motion 11.15.0+
  • Tailwind CSS 4.2.1+
  • Utility dependencies (clsx, tailwind-merge)
If you haven’t set up your project yet, go back to the installation guide first.
2

Create the TextShimmer component

Create a new file components/text-shimmer.tsx and add the following code:
components/text-shimmer.tsx
"use client";
import React, { useMemo, type JSX } from "react";
import { motion } from "motion/react";
import { cn } from "@/lib/utils";

export type TextShimmerProps = {
  children: string;
  as?: React.ElementType;
  className?: string;
  duration?: number;
  spread?: number;
  delay?: number;
  repeatDelay?: number;
};

const TextShimmer = ({
  children,
  as: Component = "p",
  className,
  duration = 2,
  spread = 2,
  delay = 0,
  repeatDelay = 0,
}: TextShimmerProps) => {
  const MotionComponent = motion.create(
    Component as keyof JSX.IntrinsicElements,
  );

  const dynamicSpread = useMemo(() => {
    return children.length * spread;
  }, [children, spread]);

  return (
    <MotionComponent
      className={cn(
        "relative inline-block bg-[length:250%_100%,auto] bg-clip-text",
        "text-transparent [--base-color:#a1a1aa] [--base-gradient-color:#000]",
        "[--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--base-gradient-color),#0000_calc(50%+var(--spread)))] [background-repeat:no-repeat,padding-box]",
        "dark:[--base-color:#71717a] dark:[--base-gradient-color:#ffffff] dark:[--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--base-gradient-color),#0000_calc(50%+var(--spread)))]",
        className,
      )}
      initial={{ backgroundPosition: "105% center" }}
      animate={{ backgroundPosition: "-5% center" }}
      transition={{
        repeat: Number.POSITIVE_INFINITY,
        duration,
        ease: "linear",
        delay,
        repeatDelay,
      }}
      style={
        {
          "--spread": `${dynamicSpread}px`,
          backgroundImage: `var(--bg), linear-gradient(var(--base-color), var(--base-color))`,
        } as React.CSSProperties
      }
    >
      {children}
    </MotionComponent>
  );
};

export default React.memo(TextShimmer);
This component creates a shimmer effect that animates across your text continuously.
3

Use the component in your app

Now you can use the TextShimmer component anywhere in your application:
app/page.tsx
import TextShimmer from "@/components/text-shimmer";

export default function Home() {
  return (
    <main className="flex min-h-screen items-center justify-center">
      <div className="text-center">
        <TextShimmer
          as="h1"
          className="text-5xl font-bold"
          duration={2.5}
        >
          Welcome to ForgeUI
        </TextShimmer>
        <p className="mt-4 text-gray-600 dark:text-gray-400">
          Animation-first React components
        </p>
      </div>
    </main>
  );
}
4

Customize the animation

The TextShimmer component accepts several props to customize the effect:
<TextShimmer
  as="h1"              // HTML element to render (default: "p")
  className="text-4xl" // Additional CSS classes
  duration={3}         // Animation duration in seconds (default: 2)
  spread={3}           // Shimmer spread width (default: 2)
  delay={1}            // Delay before animation starts (default: 0)
  repeatDelay={0.5}    // Delay between repeats (default: 0)
>
  Your text here
</TextShimmer>
The shimmer automatically adjusts its width based on the text length and the spread prop.

​
What you built

You just created an animated text component with:
  • Smooth shimmer animation using Framer Motion
  • Dark mode support out of the box
  • Full TypeScript type safety
  • Customizable animation timing and appearance
  • Optimized performance with React.memo

​
Try more components

Now that you’ve created your first ForgeUI component, try exploring other animated components:

Text Reveal

Animated text that reveals word by word with a blur effect

Animated Form

Multi-step form with smooth field animations

Animated Tabs

Tab navigation with smooth transitions

Expandable Card

Card that expands with smooth animations

​
Component structure

Most ForgeUI components follow this pattern:
  1. “use client” directive - Required for components using React hooks and Framer Motion
  2. Type-safe props - TypeScript interfaces for all component props
  3. Framer Motion animations - Using the motion API for smooth animations
  4. Tailwind CSS styling - Utility classes for styling with dark mode support
  5. Customization options - Props to control timing, appearance, and behavior

​
Next steps

Browse all components

Explore the full collection of 19 animated components

Animation concepts

Learn about animation patterns and best practices

​
Tips for success

Start with simple text components like TextShimmer or TextReveal before moving to complex components like AnimatedForm or NotificationCenter.
Remember to add the "use client" directive at the top of files that use ForgeUI components in Next.js App Router.

Build docs developers (and LLMs) love

Get started for freeTalk to us