Components / Organs

Skin

An interactive 3D skin with 13 selectable structures and 3 named views.

Installation

Run:

bunx shadcn@4.22.1 add @organui/skin

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

export function SkinDemo() {
  return <Skin />
}

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

Skin 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

Oblique, Cross-section, Surface. The viewer opens on Oblique; call setView on its ref to switch.

Model and licence

OrganUI Skin schematic model, dedicated to the public domain under CC0 1.0 The component code is MIT, but the model keeps its own licence, CC0 1.0. 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/skin-3d@0e29b3087641e269183f1ecef7a997e412b584fb/public/models/skin.glb and pass the new URL as src.

An educational model, not for diagnosis or clinical decisions.