Text morph

InstallationCopy Anchor Link

npx shadcn@latest add @quireui/text-morph

This is the one item that uses a JavaScript animation library (torph, around 29KB). No core component depends on it, so it only ships if you add it.

UsageCopy Anchor Link

<TextMorph>{following ? "Following" : "Follow"}</TextMorph>

Children must be a string. Use as to change the element and className to style it.

AccessibilityCopy Anchor Link

Screen readers read the text as it is; the morph is only visual. A change is not announced on its own, so put it in a live region when it should be heard.

Text morph has no keys of its own. When a change comes from the keyboard, the new text appears instantly instead of morphing.

MotionCopy Anchor Link

It follows the same rules as the rest of the library:

• Timing: 220ms on the standard ease-out curve, the same tokens as motion-dialog.
• Keyboard: instant when the change comes from the keyboard.
• Reduced motion: instant under prefers-reduced-motion or data-motion="reduced".

Use it for labels that change on their own (status, follow, copy). For a confirm step inside a button, the built-in confirm prop is lighter and needs no extra dependency.

API referenceCopy Anchor Link