Star Border

A clean button with a dual-gradient beam that animates smoothly across the perimeter, utilizing Framer Motion instead of custom tailwind config.

Installation

CLI

npx @modus-ui/cli add star-border

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/star-border.tsx.
3. Paste the code.

Usage

import { StarBorder } from "@/components/ui/star-border";

export default function Example() {
  return <StarBorder color="rgba(168, 85, 247, 0.8)">Premium Button</StarBorder>;
}

Props