Word Rotate

PreviewCode

Word

@/demos/WordRotateDemo.tsx

import { WordRotate } from '@/registry/magicui/word-rotate'

export function WordRotateDemo() {
  return (
    <WordRotate
      class="
        text-4xl font-bold text-black
        dark:text-white
      "
      words={['Word', 'Rotate']}
    />
  )
}

Installation

pnpm

pnpm dlx shadcn@latest add @magicui-solid/word-rotate

bun

bunx shadcn@latest add @magicui-solid/word-rotate

yarn

yarn dlx shadcn@latest add @magicui-solid/word-rotate

npm

npx shadcn@latest add @magicui-solid/word-rotate

Import

import { WordRotate } from '@/components/magicui/word-rotate'

Usage

<WordRotate words={['Word', 'Rotate']} />

Props

Prop	Type	Default	Description
class	string	-	The class name to be applied to the component
duration	number	2500	Duration of the animation
words	string[]	""	An array of words to rotate through
motionProps	MotionProps	{}	An object containing motion animation props

Original:

magicui.design/docs/components/word-rotate