BuouNext
  • Features
  • DocumentsNew
  • BrutalUINew
  • ShowcaseHot
  • Pricing
  • Blog

    Getting Started

    Introduction

    BuouNext Instruction

    InstallationRun BuouNextProject StructureComponentsAuthenticationEmailAPI CallsDatabasePaymentSEO OptimizationHeadless CMSContact

    AI Instruction

    AI ImageNewAI ChatbotNewAI SearchNewAI NotionNew

    Components

    Super ClockNewFloating DockNewAI Image CompareNewAvatar ListNewClockNewDarkModeNewStepperNewRotation AvatarNewButton with TrailNewDotNewGridNewCounter CardNewMarquee CardNewProfile CardNewBento gridNewBorder Trail CardNewBuouNext FeaturesNewColor CardNewMouse FollowingNewColor GridNewAnimotion In View CardNewLevitate CardNewReorder CardNewGenerate TextNewSmooth Fliping NumberNewSmooth Fliping TextNewSmooth Typing TextNewTyping TextNewWindow Typing TextNewFade In OutNewText DropNewScalingNew
    Docs
    Window Typing Text

    Window Typing Text

    Displays a beautiful Window Typing Text.

    Loading...

    Installation

    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 Typing Text code into your project.

    API Reference

    Props

    PropTypeDescription
    textstringtyping text words.
    delaynumberanimated delay time
    repeatbooleanIf true, the text will be erased after typing and then typed again.
    cursorReactNodeCustom cursor to show at the end of the text.
    classNamestringAdditional classes for the Text.
    growbooleanIf true, the container will grow to fit the text as it types
    alwaysVisibleCountnumberNumber of characters to keep always visible
    smoothbooleanIf true, the typing effect will be smooth instead of typing one character at a time.
    waitTimenumberTime to wait before starting the next cycle of typing
    onComplete() => voidCallback function to be called when the typing is complete
    hideCursorOnCompletebooleanIf true, the cursor will be hidden after typing is complete
    Typing TextFade In Out
    import TypingText from "@/components/typing-text"
    <TypingText text="Here is Our Animation Components" />
    <|