Prism Key

A frosted button whose masked gradient rim catches the theme's primary colour like light through a prism. The default arrow variant carries a solid ink chip whose arrow tilts upward on hover; the plain variant is text only. Labels are set in uppercase mono, and every colour comes from the active theme. Animations and transitions are turned off when the user prefers reduced motion.

Installation

CLI

npx @modus-ui/cli add prism-key

Manual

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

Usage

import { PrismKey } from "@/components/ui/prism-key";

export default function Example() {
  return <PrismKey onClick={() => console.log("clicked")} />;
}

Props