lottie-react

Render After Effects animations exported as Lottie JSON directly in React with full playback control.

lottie-react

React

Render After Effects animations exported as Lottie JSON directly in React with full playback control.

npm GitHub Docs

Fit

Bundle (gzip)

79.8 kB

314.8 kB raw

Install size includes transitive dependencies. Bundle size is gzipped browser payload.

Freshness

The Problem

Designers hand you a gorgeous After Effects animation, but shipping it as a video or GIF means huge files, no transparency, and zero interactivity. Recreating it by hand in CSS is a week of work and never quite matches.

What It Does

lottie-react plays Lottie JSON (exported from After Effects via Bodymovin) as crisp, resolution-independent vector animation. It exposes a simple component plus a useLottie hook so you can play, pause, seek, and react to events, keeping file sizes tiny and animations pixel-perfect.

Installation

bash

npm install lottie-react

Usage Example

jsx

import Lottie from 'lottie-react';
import loadingAnimation from './loading.json';

export function Loader() {
  return <Lottie animationData={loadingAnimation} loop autoplay />;
}

Related packages

cmdkReact

Fast, composable command palette for React — keyboard-driven search UI with fuzzy filtering and accessible markup out of the box.

@dnd-kit/coreReact

Modern, accessible drag-and-drop toolkit for React — fully customizable with keyboard support, collision detection, and zero dependencies.

embla-carousel-reactReact

Lightweight, extensible carousel library for React — smooth scrolling, touch/mouse drag, and full CSS control without prescribing markup.

flagsReact

Provider-agnostic feature flags SDK for Next.js and React — toggle features without redeploying.

framer-motionReact

Production-ready declarative animation library for React — gestures, layout animations, and scroll-driven effects with a clean API.