Magic Text

A text component with a magical spinning gradient fill effect.

Magic Text

Preview

Magic TextLarger Magic TextCustom Gradient

Installation

Use the CLI to add this component to your project.

npx shadcn@latest add https://ui.nyxhora.com/r/magic-text.json

Usage

tsx
9 lines
1
2
3
4
5
6
7
8
9
import { MagicText } from "@/components/ui/magic-text";

export default function Example() {
  return (
    <MagicText>
      Magic Text content
    </MagicText>
  );
}

Props

PropTypeDefaultDescription
gradientColorstring—The gradient color to use for the magic effect