React Register Map

A datasheet-style register description in the manner of IP-XACT / CMSIS-SVD register views: a bit-numbered field diagram with reserved bits auto-filled and hatched, plus a field table with access-type badges (RW, RO, WO, W1C) and reset values. Hovering a field highlights it in both the diagram and the table — the interaction engineers expect from a register browser.

DMA_CTRLoffset 0x0004reset 0x0000_0100DMA channel control register

PRIO

BURST

Bits	Field	Access	Reset	Description
[31]	BUSY	RO	0x0	Transfer in progress
[24]	ERR	W1C	0x0	Bus error flag, write 1 to clear
[16]	IRQ_EN	RW	0x0	Raise interrupt on transfer complete
[9:8]	PRIO	RW	0x1	Channel arbitration priority
[5:4]	BURST	RW	0x0	Burst size: 1 / 4 / 8 / 16 beats
[1]	DIR	RW	0x0	Transfer direction: 0 = MEM→PER, 1 = PER→MEM
[0]	EN	RW	0x0	Channel enable

Hover a field in the diagram or the table — both highlight together.

Installation

npx shadcn@latest add register-map.json

Usage

Only the defined fields are declared — gaps become hatched RSVD segments automatically:

Design notes

Reserved bits are explicit — unallocated ranges render as dashed, hatched segments, exactly as a datasheet marks them; they are excluded from the table.
Access types are badges — color-coded but always spelled out (RW, W1C …), so meaning survives grayscale printing.
MSB left — bit 31 down to 0, the universal register-diagram convention.
Cross-highlighting — diagram segment and table row share hover state, like an interactive SVD browser.

Props

RegisterMap

Prop	Type	Default	Description
name	string	—	Register name, e.g. "DMA_CTRL"
offset	string	—	Byte offset shown in the header
width	number	32	Register width in bits
resetValue	string	—	Full-register reset value
description	string	—	Short description in the header
fields	RegisterField[]	—	Declared fields (gaps become reserved)

RegisterField

Prop	Type	Default	Description
name	string	—	Field name
bits	[number, number] \	number	—
access	'RW' \	'RO' \	'WO' \
reset	string	0x0	Field reset value
description	string	—	Table description column