Aurora Text

PreviewCode

Ship beautifulbeautiful

@/demos/AuroraTextDemo.tsx

import { AuroraText } from '@/registry/magicui/aurora-text'

export function AuroraTextDemo() {
  return (
    <h1 class="
      text-4xl font-bold tracking-tighter
      md:text-5xl
      lg:text-7xl
    "
    >
      Ship
      {' '}
      <AuroraText>beautiful</AuroraText>
    </h1>
  )
}

Installation

pnpm

pnpm dlx shadcn@latest add @magicui-solid/aurora-text

bun

bunx shadcn@latest add @magicui-solid/aurora-text

yarn

yarn dlx shadcn@latest add @magicui-solid/aurora-text

npm

npx shadcn@latest add @magicui-solid/aurora-text

Import

import { AuroraText } from '@/components/magicui/aurora-text'

Usage

<AuroraText>Aurora Text</AuroraText>

Props

Prop	Type	Default	Description
class	string	""	The class name to be applied to the component
children	JSX.Element	-	Children elements
colors	string[]	["#FF0080", "#7928CA", "#0070F3", "#38bdf8"]	Array of colors used for the aurora effect
speed	number	1	Animation speed multiplier (1 is default, 2 is twice as fast)

Original:

magicui.design/docs/components/aurora-text