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/aBureau · ✓DépréciéBlocs

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 uniquement — React, depuis @krizaka/ui/anatomy-plate. Déprécié : conservé pour les apps qui l'utilisent encore, retiré à sa prochaine version majeure.

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

Pourquoi il est là. No product or site imports it and no filed need names it (ADR-006 audit, 2026-10-25): there is no replacement.

DépréciéDepuis 3.55.0, retiré en 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.

Quand l’utiliser

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.

Quand ne pas l’utiliser

A sequence of steps over time.À la place : Stepper
A list of decisions and what they cost.À la place : Decision list

Installation

Installer

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

Styles

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

Importer

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

Exemples

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	Défaut	Description
`parts`requis	`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`.

Accessibilité

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.

Bonnes pratiques

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.

Générée depuis le code de @krizaka/ui 3.63.1 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub