Components / Organs

Breast

An interactive 3D breast with 16 selectable structures and 3 named views.

Installation

Run:

bunx shadcn@4.22.1 add @organui/breast

This adds breast.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 { Breast } from "@/components/breast"

export function BreastDemo() {
  return <Breast />
}

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 BreastProps from the same file as Breast. The organ model is already configured.

Breast 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, Right lateral, Left lateral. The viewer opens on Anterior; call setView on its ref to switch.

Model and licence

HuBMAP Human Reference Atlas 3D reference organs for the breast (Heidi Schlehlein), CC BY 4.0. Adapted by OrganUI. The component code is MIT, but the model keeps its own licence, CC BY 4.0. The viewer shows this credit; see Licences before hiding it.

The GLB is built in the OrganUI repository and served by organui.com, and its provenance and changes are documented. To serve it yourself, download it from https://organui.com/models/breast.glb and pass the new URL as src.

An educational model, not for diagnosis or clinical decisions.