Magic Button

A button with a magic border animation effect.

Preview

Installation

Use the CLI to add this component to your project.

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

Usage

tsx
19 lines
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { MagicButton } from "@/components/ui/magic-button";
import { Send } from "lucide-react";

export const metadata = generateComponentMetadata({
    name: "Magic Button",
    description: "A button with a magic border animation effect.",
    category: "Effects",
});


export default function MyComponent() {
  return (
    <MagicButton 
      title="Click me" 
      icon={<Send className="w-4 h-4" />}
      position="right"
    />
  );
}

Examples

With Icon Left

With Icon Right

Custom Classes

Props

PropTypeDefaultDescription
titlestring-The text to display inside the button.
iconReact.ReactNodeundefinedThe icon component to display.
position'left' | 'right'undefinedPosition of the icon relative to the title.
handleClick() => voidundefinedFunction to execute on click.
otherClassesstringundefinedAdditional CSS classes for custom styling.