Satin Capsule

A satin capsule shaded from the card and muted tokens, edged by a graded hairline. The label sits beside a small mono annotation and a round arrow chip in the primary colour that nudges forward on hover, while the shadow warms toward the primary. Transitions are off when the user prefers reduced motion.

Installation

CLI

npx @modus-ui/cli add satin-capsule

Manual

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

Usage

import { SatinCapsule } from "@/components/ui/satin-capsule";

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

Props