Docs
Fliping Text

Fliping Text

Displays a beautiful Fliping Text.

Build
Super 

Website using BuouUI

Installation

Install the following dependencies:

npm install framer-motion

Copy and paste the cn util code into your project.

import { ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
 
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Copy and paste the Fliping Text code into your project.

API Reference

Props

PropTypeDescription
wordsstringfliping text words.
classNamestringAdditional classes for the Text.
durationnumberanimated duration

Usage

export function FlipWordsDemo() {
  const words = ["Super", "Smooth", "Beautiful", "Modern"]
 
  return (
    <div className="h-[40rem] flex justify-center items-center px-4">
      <div className="text-4xl mx-auto font-normal text-neutral-600 dark:text-neutral-400">
        Build
        <br />
        <FlipWords words={words} /> <br />
        Website using BuouUI
      </div>
    </div>
  )
}
Smooth Fliping NumberSmooth Typing Text