# pmndrs/react-three-flex

💪📦  Flexbox for react-three-fiber

Repository: https://github.com/pmndrs/react-three-flex
Canonical: https://ross.abutalabs.com/products/react-three-flex
Language: TypeScript
License: MIT
License Family: permissive
Topics: react, 3d, react-three-fiber, r3f, three, flex, flexbox, yoga, yoga-layout
Last push: 2022-12-06T08:37:19+00:00

## Health v2 (maintenance only)
Score: 23/100 (v2, computed 2026-09-02T17:46:02.011165+00:00)
- activity 0, release rhythm 8, longevity 100
- inputs: {"age_days": 2206, "days_push": 1366, "days_rel": null, "gap_med": null, "n_releases_24m": 0}
- flags: none
- formula: round(0.45*activity + 0.35*rhythm + 0.20*longevity); archived -> min(score, 10)

## Adoption (not part of the score)
Stars 1736, forks 44 (observed 2026-08-28T04:05:29.683505+00:00)

## What it is
A React library that brings the CSS flexbox layout spec to react-three-fiber 3D scenes, built on Facebook's Yoga layout engine. It lets developers wrap 3D objects in Flex and Box components so they are automatically positioned in 3D space like DOM elements.

## Use cases
- lay out 3D objects in a three.js scene with flexbox
- automatically position meshes in react-three-fiber
- build responsive 3D UI layouts in React
- center and space 3D content without manual math
- create nested 3D layout containers with padding and margins

## When to choose
- you use react-three-fiber and want declarative flexbox layout for 3D objects
- you need DOM-like layout semantics (justify, align, grow) in a three.js scene
- you want to avoid hand-computing 3D positions for UI-like content

## When to avoid
- you don't use React or react-three-fiber
- you need a general 3D physics or game engine layout system
- you need a library with frequent updates - the latest release dates to late 2022

## Facets
- artifact type: library
- maturity: maintenance
- function: ui-components, graphics, animation
- domain: web-development, frontend, graphics
- platform: browser
- tags: react-three-fiber, flexbox, yoga-layout, threejs, 3d-layout, game-development, web-server, nodejs

## Member repositories
- pmndrs/react-three-flex (main) score 23

## Provenance
- Observed fields: from GitHub, fetched 2026-08-28T04:05:29.683505+00:00.
- Health v2: computed from the inputs above; adoption is never an input.
- Inferred fields (summary, facets, guidance): AI-extracted, prompt v1, taxonomy v1, on 2026-08-30T03:30:41.871575+00:00, confidence not recorded.
  - readme: https://github.com/pmndrs/react-three-flex (fetched 2026-08-28T04:05:29.683505+00:00, sha efebfde40269)
- Data as of 2026-08-30T08:39:29.467469+00:00.