labsUI

TextSwap

Spring-powered text morphing and ticker. Auto-cycles phrases or animates whenever children change with blur and slide transitions.

npx @kznlabs/labsui add text-swap
Direction:
Crafted withNext.js 16 App Router
import { TextSwap } from "@/components/ui/text-swap";export function DynamicTag() {  return (    <span className="font-medium">      Crafted with{" "}      <TextSwap        items={["Next.js 16", "Tailwind CSS 4", "motion 14"]}        direction="up"      />    </span>  );}

<TextSwap>

  • children
    string

    A single string; changing it swaps to the new text.

  • directiondefault "up"
    "up" | "down" | "fade"

    Swap direction (default: "up").

  • index
    number

    Active index when controlling externally.

  • intervaldefault 3000
    number

    Milliseconds between swaps when cycling automatically (default: 3000).

  • items
    readonly string[]

    Array of items to cycle through, or pass a single changing child.

  • pauseOnHoverdefault true
    boolean

    Pause the cycle on mouse hover (default: true).

PropTypeDefault
children

A single string; changing it swaps to the new text.

string—
direction

Swap direction (default: "up").

"up" | "down" | "fade""up"
index

Active index when controlling externally.

number—
interval

Milliseconds between swaps when cycling automatically (default: 3000).

number3000
items

Array of items to cycle through, or pass a single changing child.

readonly string[]—
pauseOnHover

Pause the cycle on mouse hover (default: true).

booleantrue

* required. Every component also takes className.