Text that rearranges through shared letters as the phrase changes.
pnpm dlx shadcn@latest add @latheui/text-morphPart of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.
Text Morph is part of Lathe Pro
The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.
Depends on
| Prop | Type | Default | Description |
|---|---|---|---|
| children* (required) | string | — | Phrase to display; change it to trigger the transition. |
| className | string | — | Typography and layout. |
Combine the control with your own layout. Semantic colors follow the active theme.
import * as React from "react"
import { TextMorph } from "@/components/ui/text-morph"
import { Button } from "@/components/ui/button"
export default function Demo(){const [index,setIndex]=React.useState(0);const words=["Design with care","Build with purpose","Make it your own"];return <div className="flex max-w-full flex-col items-center gap-6"><TextMorph className="max-w-full text-xl font-medium">{words[index]}</TextMorph><Button variant="outline" size="sm" onClick={()=>setIndex((index+1)%words.length)}>Change phrase</Button></div>}