# Heart

An interactive 3D heart with 11 selectable structures and 3 named views.

## Installation

```
bunx shadcn@4.22.1 add @organui/heart
```

This adds `heart.tsx` to your components directory. Its dependency, [organ viewer](https://organui.com/docs/components/organ-viewer), adds `organ-viewer.tsx`, three.js and the shadcn components the viewer's controls use, in your project's [Base UI or Radix](https://organui.com/docs/base-ui) style. Every organ and the cell share that one `organ-viewer.tsx`.

## Usage

```
import { Heart } from "@/components/heart"

export function HeartDemo() {
  return <Heart />
}
```

Pair it with the [anatomy tree](https://organui.com/docs/components/anatomy-tree) as shown below. For a complete explorer with a mobile sheet, install as the [Explorer 01 block](https://organui.com/blocks#explorer-01). 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 `HeartProps` from the same file as `Heart`. The organ model is already configured.

| 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, © The Database Center for Life Science licensed under CC Attribution 4.0 International The component code is MIT, but the model keeps its own licence, [CC BY 4.0](https://dbarchive.biosciencedbc.jp/en/bodyparts3d/lic.html). The viewer shows this credit; see [Licences](https://organui.com/docs/licences) before hiding it.

The GLB loads from a commit-pinned copy in the explorer repository, where its [provenance and changes](https://github.com/organui/heart-3d/blob/c72ce6654ff8e282942f97750d3104f55ef4fc3d/public/models/ATTRIBUTION.md) are documented. To serve it yourself, download it from [https://cdn.jsdelivr.net/gh/organui/heart-3d@c72ce6654ff8e282942f97750d3104f55ef4fc3d/public/models/heart.glb](https://cdn.jsdelivr.net/gh/organui/heart-3d@c72ce6654ff8e282942f97750d3104f55ef4fc3d/public/models/heart.glb) and pass the new URL as `src`.

An educational model, not for diagnosis or clinical decisions.

Source: https://organui.com/docs/components/heart