Halo Invite

An invite link in a card-coloured pill: a serif monogram badge (or a portrait), a serif label and an arrow chip that fills with ink on hover, while a halo of the theme's primary colour circles the edge. Animations and transitions are turned off when the user prefers reduced motion.

Installation

CLI

npx @modus-ui/cli add halo-invite

Manual

1. Install framer-motion.
2. Copy the code from the component tab.
3. Create a file at components/ui/halo-invite.tsx.
4. Paste the code.

Usage

import { HaloInvite } from "@/components/ui/halo-invite";

export default function Example() {
  return <HaloInvite href="/contact" />;
}

Props