Anatomy plate

A component's anatomy as a naturalist's plate: the live specimen drawn large in the middle, its parts numbered around it, a hairline from each note — the plate is its own text version.

Web · ✓Mobile · n/aDesktop · ✓DeprecatedBlocks

import { AnatomyPlate } from "@krizaka/ui/anatomy-plate";

Anatomyto scale × 1.6

the label a verb and its object, never « Submit ».
the loader turns in place while it waits; the width does not jump.

the fill the ink of the pen: one primary per view.
the focus 2 px of the ring, 2 px away, always visible.

Web only — React, from @krizaka/ui/anatomy-plate. Deprecated: kept for the apps that still use it, removed in its next major.

Mobile · n/a. A documentation figure on a reading page; an app explains a control in its own screen.

Why it is here. No product or site imports it and no filed need names it (ADR-006 audit, 2026-10-25): there is no replacement.

DeprecatedSince 3.55.0, removed in 4.0.0. No product or site imports it and no filed need names it (ADR-006 audit, 2026-10-25): there is no replacement.

When to use

The anatomy section of a component's documentation page: what each part is for.
A product page that explains one object (a receipt, a report) part by part.

When not to use

A sequence of steps over time.Use instead: Stepper
A list of decisions and what they cost.Use instead: Decision list

Installation

Install

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { AnatomyPlate } from "@krizaka/ui/anatomy-plate";

Examples

A button's anatomy

The live Button at × 1.6, its four parts and their reasons.

Anatomyto scale × 1.6

the label a verb and its object, never « Submit ».
the loader turns in place while it waits; the width does not jump.

the fill the ink of the pen: one primary per view.
the focus 2 px of the ring, 2 px away, always visible.

Props

A component's anatomy as a naturalist's plate: the specimen in the middle, its numbered parts and their reasons around it.

Prop	Type	Default	Description
`parts`required	`readonly AnatomyPart[]`	—	The parts, numbered in this order.
`scale`	`number`	`1.6`	The specimen's scale on a wide screen (it is drawn at 1 on a phone).
`subtitle`	`ReactNode`	—	One line under the title, or the scale: `to scale × 1.9`.
`title`	`ReactNode`	—	The plate's title: `Anatomy`.

Accessibility

The parts are ordered lists whose numbers follow the plate's (value); the leader lines are decorative.
On a phone the plate stacks: the specimen at scale 1, then the list, no line to follow.
The specimen keeps its own accessibility: it is the live component.

Best practices

Three to six parts; each note one sentence that says why the part is there, not what it looks like.
Pass the real component as the specimen, never a picture of it.
Let the parts alternate sides (the default), or set side to keep related parts together.

Generated from the code of @krizaka/ui 3.63.1: its meta.ts, its examples and its types.Edit this documentation on GitHub