Components / Organs

Nails

An interactive 3D nail with 14 selectable structures and 3 named views.

Installation

Run:

bunx shadcn@4.22.1 add @organui/nails

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

export function NailsDemo() {
  return <Nails />
}

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

Nails 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

Sagittal, Oblique, Nail matrix. The viewer opens on Sagittal; call setView on its ref to switch.

Model and licence

OrganUI fingertip and nail 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 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/nails.glb and pass the new URL as src.

An educational model, not for diagnosis or clinical decisions.