---
name: React Three Fiber
slug: react-three-fiber
url: "https://dontmakeitugly.com/resources/react-three-fiber"
website: "https://r3f.docs.pmnd.rs"
github: "https://github.com/pmndrs/react-three-fiber"
docs: "https://r3f.docs.pmnd.rs/getting-started/introduction"
npm: "https://www.npmjs.com/package/@react-three/fiber"
type: package
categories:
  - motion
tags:
  - react
  - "3d"
  - webgl
  - three
  - drei
frameworks:
  - react
  - nextjs
pricing: free
license: MIT
openSource: true
agentFriendly: excellent
agentAccessMethods:
  - documentation
  - github
  - npm
installCommand: "npm install three @react-three/fiber @react-three/drei"
difficulty: advanced
dateAdded: "2026-09-02"
---

# React Three Fiber

Three.js as React components, with a huge helper ecosystem.

- Type: Package
- Categories: Motion
- Pricing: Free · License: MIT
- Open source: yes
- Works with: React, Next.js, Three.js, TypeScript

## What it is

React Three Fiber (R3F) lets you build Three.js scenes declaratively as React components. Together with the drei helper library it makes common 3D tasks (cameras, controls, environment lighting, text, loaders) a few lines each. Maintained by Poimandres.

## Why it's here

If you're on React and want 3D, this is the way. The drei helpers are where the productivity is. Look at the examples gallery before you start.

## Best for

- 3D in React apps
- interactive product scenes
- hero visuals

## Links

- Website: https://r3f.docs.pmnd.rs
- Docs: https://r3f.docs.pmnd.rs/getting-started/introduction
- GitHub: https://github.com/pmndrs/react-three-fiber
- npm: https://www.npmjs.com/package/@react-three/fiber

## Can my agent use this?

Yes. Docs, public source and npm. Ask your agent to use @react-three/fiber with @react-three/drei helpers, and to lazy-load the canvas.

Agent friendliness: Excellent. Public docs, public source or an installable package. An agent can read, install and implement this directly.
Access methods: Docs, GitHub, npm.
Install: `npm install three @react-three/fiber @react-three/drei`

## Prompt to hand your agent

```text
Use React Three Fiber as a design and implementation reference for this project.

What it is: Three.js as React components, with a huge helper ecosystem.

Website: https://r3f.docs.pmnd.rs
Documentation: https://r3f.docs.pmnd.rs/getting-started/introduction
GitHub: https://github.com/pmndrs/react-three-fiber
npm: https://www.npmjs.com/package/@react-three/fiber
Install: npm install three @react-three/fiber @react-three/drei

Use it specifically for:
- 3D in React apps
- interactive product scenes
- hero visuals

How you can access it: Docs, GitHub, npm.
Works with: React, Next.js.
License: MIT. Respect it.

Read the documentation before writing code, and use the current version's API. Install it properly rather than re-implementing it. Adapt the defaults to this project's existing design tokens, typography, spacing and accessibility requirements. Do not blindly copy the entire resource.
```

## Related

- [ShaderGradient](https://dontmakeitugly.com/resources/shadergradient.md): Slow-moving 3D gradients for React, Framer and Figma that look like expensive motion design.
- [Aceternity UI](https://dontmakeitugly.com/resources/aceternity-ui.md): Showy, copy-paste React components for landing pages that need a moment.
- [Liquid Logo](https://dontmakeitugly.com/resources/liquid-logo.md): Drop in your logo and get it back as flowing liquid metal, rendered live with shaders.
- [Thinking Orbs](https://dontmakeitugly.com/resources/thinking-orbs.md): An animated orb that shows what your AI is doing: listening, thinking, searching, working.

## In collections

- [Motion resources worth knowing](https://dontmakeitugly.com/collections/motion-worth-knowing.md)

React Three Fiber is an independent resource listed by Don't Make It Ugly. We link to it; we aren't affiliated with it. Pricing and licence details are as understood at the time of listing; check the official site.