Lottie animations for React

One component plays a Lottie file. The hook, the instance and the whole engine underneath are yours when you want them.

InstallExamples
import { Lottie } from "lottie-react";export function Hero() {  return <Lottie src="/hero.json" autoplay loop />;}

Renders on the server

Import it anywhere React runs. No dynamic import, no client-only workaround.

About 4.4 KB

Lottie alone, gzipped. Tree-shakeable, one file per module: an import pays only for what it reaches.

Your styles win

Every default ships at zero specificity. Restyle with a plain class, no !important.

Plain Lottie files

An imported object, a served path, or a URL. Exported anywhere, played as is.

Coming from v2? The migration guide maps every v2 surface onto v3.