Components / Clinical

Dermatome map

The skin each spinal nerve supplies, front and back. Pick a level from the list or a region on the body to see its area and the key point where it is tested.

Front

Back

C6 Cervical

Outer forearm and thumb

Key sensory point: Thumb, dorsal surface of the proximal phalanx

A simplified, original illustration. Dermatomes overlap and vary between people and between published charts; this is not a clinical tool.

Installation

In a project set up as in Installation, run:

bunx shadcn@4.22.1 add https://organui.com/r/dermatome-map.json

Or by name: bunx shadcn@4.22.1 add @organui/dermatome-map.

The source installs into your configured UI directory, along with shadcn's button if you do not have it yet. The figures are inline SVG, so there are no images or 3D packages to load.

View registry item JSON

Usage

"use client"
import { useState } from "react"
import { DermatomeMap, type DermatomeId } from "@/components/ui/dermatome-map"

export function SensoryExam() {
  const [selectedId, select] = useState<DermatomeId | null>(null)
  return <DermatomeMap selectedId={selectedId} onSelectionChange={select} />
}

Selection is controlled. Levels use the 28 sensory levels of the International Standards for Neurological Classification of Spinal Cord Injury (ISNCSCI): C2 to T12, L1 to S3 and S4-5. Clicking a region selects its level on both sides of the body; Clear selection or Escape emits null. The exported dermatomes array lists each level with its region, the area it covers and its key sensory point.

Show results

// Color levels by a sensory score, for example light touch.
const colors = { C6: "var(--destructive)", C7: "oklch(0.8 0.12 85)" }

<DermatomeMap
  selectedId={selectedId}
  onSelectionChange={select}
  colors={colors}
  views={["front"]}
/>

Pass colors to fill levels with your own CSS colors, for example to show a sensory exam. Levels you leave out keep the default palette, one hue per region, which dermatomeColor returns. Set views to show only the front or back, and showLabels to hide the level labels.

Keyboard and accessibility

The level list is one tab stop. Arrow keys move between levels, Home and End jump to C2 and S4-5, Enter or Space selects, and Escape clears the selection. Moving through the list does not change the selection. Each figure is an image with a text alternative; the list is the accessible way to choose a level, and hovering either one previews the level in both.

The figures are a simplified illustration drawn for OrganUI, after the ISNCSCI key sensory points. Real dermatomes overlap and vary between people and between charts, so do not use this map for diagnosis. The face and crown are supplied by the trigeminal nerve and are left unassigned.