# TextSwap

- Page: <https://kznlabs.github.io/labsUI/components/text-swap>

## TextSwap (`text-swap`, component)

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

- Install: `npx @kznlabs/labsui add text-swap`
- Docs: <https://kznlabs.github.io/labsUI/components/text-swap>
- Brings: utils
- npm: clsx@^2.1.1, motion@14.7.1, tailwind-merge@^3.7.0

### API

- `<TextSwap>`
  - `children?: string`: A single string; changing it swaps to the new text.
  - `direction?: "up" | "down" | "fade"` = `"up"`: Swap direction (default: "up").
  - `index?: number`: Active index when controlling externally.
  - `interval?: number` = `3000`: Milliseconds between swaps when cycling automatically (default: 3000).
  - `items?: readonly string[]`: Array of items to cycle through, or pass a single changing child.
  - `pauseOnHover?: boolean` = `true`: Pause the cycle on mouse hover (default: true).

### Usage

```tsx
<TextSwap items={["Next.js 16", "Tailwind CSS 4", "motion 14"]} direction="up" />
```

### Example: dynamic-tag.tsx

```tsx
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>
  );
}
```