Skip to content

Search pages

Jump to any page on the site.

Export

How to install each of the 4 export formats.

Motif exports 4 files. Get them from the Export panel in the playground: pick a tab, then Copy or Download. Every file starts with the preset, the knob values, and a link that re-opens them in the playground.

JSON

motif.tokens.json is the canonical token file, in the token format. Use it as the source for other tools, such as a design tool plugin or a native build step.

CSS variables

motif.css holds every token as a CSS variable, plus a class for each recipe. Springs become linear() easings, with a cubic-bezier fallback for older browsers.

  1. Put motif.css in your project and import it once, for example in your root layout.
  2. Add the recipe classes:
<button class="motif-press">Save</button>

<button class="motif-toggle" role="switch" aria-checked="false">
  <span class="motif-toggle-thumb"></span>
</button>
  1. Or use the variables in your own CSS:
.card {
  transition: transform var(--motif-spring-default-duration) var(--motif-spring-default);
}

The file ends with a prefers-reduced-motion block. It removes travel and scale and keeps short fades. You do not need to add your own.

Motion variants

motif.ts is for React with Motion (motion/react).

  1. Install Motion: npm install motion.
  2. Put motif.ts in your project, for example in src/lib/.
  3. Use a recipe, with its reduced-motion twin:
import { motion } from "motion/react";
import { press, reduced, useMotif } from "@/lib/motif";

export function SaveButton() {
  return (
    <motion.button
      variants={useMotif(press, reduced.press)}
      initial="rest"
      animate="rest"
      whileTap="pressed"
    >
      Save
    </motion.button>
  );
}

The tokens (springs, durations, eases, distances, scales, stagger) are plain values. useMotif is a hook: call it from client components.

MOTION.md

MOTION.md is a rules file for AI coding agents and for people. It holds the motion personality, the hard rules, a table of which recipe to use for each element, every token, and the reduced-motion rules. See AI rules.

Install with shadcn

If your project uses shadcn/ui, one command installs a feel. It adds lib/motif.ts, MOTION.md, and motif.tokens.json, merges the motion CSS into your global stylesheet, and installs Motion.

npx shadcn@latest add https://motif-ui-kappa.vercel.app/r/snappy.json

Swap snappy for any hosted feel: calm, playful, banking, work, creative, shopping, social, or kids. A custom feel from the playground or Find your feel downloads as motif-feel.json; install it with npx shadcn@latest add ./motif-feel.json.

Then add the motion-ready components: shadcn's dialog, sheet, dropdown menu, tooltip, and accordion, with the same API, wired to lib/motif.ts.

npx shadcn@latest add https://motif-ui-kappa.vercel.app/r/motif-components.json

Or one at a time: motif-dialog, motif-sheet, motif-dropdown-menu, motif-tooltip, motif-accordion. They work in Radix and Base UI projects. The full list is at /r/registry.json. The Use it page walks through every option step by step.