quickstart.mdx

title	Quickstart: Add Motive Animated Icons to React
description	Install rex-motive with Framer Motion, import your first animated icon, and render production-ready micro-interactions in any React or Next.js project.
icon	bolt

Follow these steps to install rex-motive and add animated icons to your project.

Install `rex-motive` along with `framer-motion` (required peer dependency) using your package manager of choice:

<CodeGroup>
  ```bash yarn
  yarn add rex-motive framer-motion
  ```
  ```bash npm
  npm install rex-motive framer-motion
  ```
  ```bash pnpm
  pnpm add rex-motive framer-motion
  ```
</CodeGroup>

Import your desired animated icon from `rex-motive` into any React component:

```tsx
import { AnimatedBell, AnimatedHeart } from "rex-motive";

export default function NotificationsHeader() {
  return (
    <div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
      <AnimatedBell size={24} trigger="hover" />
      <AnimatedHeart size={24} trigger="click" color="#ef4444" />
    </div>
  );
}
```

Adjust `size`, `strokeWidth`, `color`, and `trigger` mode to fit your brand and design system!

<Tip>
  Hover over icons or click them in your UI to see the micro-interactions spring to life!
</Tip>

---

Next Steps

Learn how hover, click, auto, and focus triggers work. Detailed prop definitions for size, stroke width, active state, and accessibility.