Skip to content

Motion Primitives

Motion Primitives gives React apps copyable components with movement, including a dialog. Check which parts of the interaction the example handles and how your version works with reduced motion.

Visit Motion Primitives

What does the Dialog example give you?

It gives you source for a dialog that opens with the browser’s built-in modal behavior and uses Motion to animate it. Supply the title, the available choices and what those choices do in your app.

The source calls the browser’s modal open method, listens for the cancel event that Escape can trigger and names the close control. Use the title and description pieces so people can tell what the dialog asks. Make sure Cancel and confirmation have different outcomes.

How can you check the dialog’s motion and keyboard behavior?

Test the choice before spending time on movement. For a local fake settings dialog, the app should change the sample choice only when someone confirms.

  1. Try the original behavior
    Open with the keyboard. Check that the focus is inside the named dialog and that Escape closes it without changing the sample choice. Check that the opener receives focus again.
  2. Check the result of each choice
    Reopen it and try Cancel, then reopen and confirm. Only the last action should change the sample. Watch whether the animation delays or hides a control you need.
  3. Keep the same result with less motion
    The inspected Dialog source has no local reduced-motion hook. Check your app’s motion settings and add reduced or immediate transitions if needed. Repeat the keyboard test with the device preference on.

What does your project need before you add it?

Check the Motion and Tailwind setup and copy just the component you need. The installation guide gives both a command-line path and manual copying.

Read the selected item’s imports, the lines that list what it needs. The Dialog source uses local helpers and an icon package in addition to Motion. Check that your version of the app has those pieces before testing the copied file.

How do you update it after editing the source?

The copied component stays in your project under the repository’s MIT license. Keep its copyright and permission notices. If the original author changes the dialog, compare that new file with your version before applying the update.

Motion is the animation package the component uses. It updates as an installed dependency, while changes to your copied dialog are yours to merge. Check the dialog again after either kind of update.