Components / Organs

Esophagus

An interactive 3D esophagus with 17 selectable structures and 3 named views.

Installation

Run:

bunx shadcn@4.22.1 add @organui/esophagus

This adds esophagus.tsx to your components directory. Its dependency, organ viewer, adds organ-viewer.tsx, three.js and the shadcn components the viewer's controls use, which need one of shadcn's Base UI styles. Every organ and the cell share that one organ-viewer.tsx.

View registry item JSON

Usage

import { Esophagus } from "@/components/esophagus"

export function EsophagusDemo() {
  return <Esophagus />
}

Pair it with the anatomy tree as shown below. For a complete explorer with a mobile sheet, install as the Explorer 01 block. Both share structure IDs, so one piece of state drives selection and visibility in each.

Without Controls

Hide the built-in view, zoom, and reset controls while keeping camera interaction and attribution.

Controlled Selection

Connect selection to your application state with selectedId and onSelectionChange.

With Anatomy Panel

Pair this component with AnatomyTree for shared selection and visibility. For a complete layout with a mobile sheet, see the Explorer 01 block.

API Reference

Import EsophagusProps from the same file as Esophagus. The organ model is already configured.

Esophagus props
Prop	Type	Default	Description
`src`	`string`	Organ model URL	Override the model URL to host the GLB yourself.
`selectedId`	`string \| null`	null	Control the selected structure ID.
`onSelectionChange`	`(id: string) => void`	—	Receive selection changes from the model.
`visibility`	`Readonly<Record<string, boolean>>`	Model defaults	Set structure visibility by ID; missing IDs are visible.
`defaultView`	`string`	Organ default view	Choose the initial named view.
`onViewChange`	`(view: string \| null) => void`	—	Receive the view name, or null after free rotation.
`controls`	`boolean`	true	Show view, zoom and reset controls.
`attribution`	`boolean`	true	Show model credit and licence. Credit it elsewhere if hidden.
`label`	`string`	Interactive [organ] model	Accessible name for the viewer region.
`className`	`string`	—	Set the component's layout and dimensions.
`ref`	`React.Ref<OrganViewerHandle>`	—	Access setView, zoom, rotate and reset methods.

Views

Anterior, Posterior, Left lateral. The viewer opens on Anterior; call setView on its ref to switch.

Model and licence

BodyParts3D / Anatomography, © The Database Center for Life Science. CC BY-SA 2.1 Japan. Adapted by OrganUI. The component code is MIT, but the model keeps its own licence, CC BY-SA 2.1 JP. The viewer shows this credit; see Licences before hiding it.

The GLB loads from a commit-pinned copy in the explorer repository, where its provenance and changes are documented. To serve it yourself, download it from https://cdn.jsdelivr.net/gh/organui/esophagus-3d@ba0fddba344ae586f266586a9a30f3fce10f2aec/public/models/esophagus.glb and pass the new URL as src.

An educational model, not for diagnosis or clinical decisions.