React Packet / Bit-Field Diagram
A protocol frame or instruction-encoding layout: fields sized proportionally to their bit width, wrapped into fixed-width words, each labeled with its bit range, name, and width. Fields that cross a word boundary are split and marked with …. A natural companion to Register Map and Memory Map.
RV32I — R-type instruction
31:257b
funct7
24:205b
rs2
19:155b
rs1
14:123b
funct3
11:75b
rd
6:07b
opcode
32 bits · 32-bit words · MSB → LSB
Framed packet header
79:728b
sync
71:684b
version
67:644b
type
63:4816b
length
47:3216b
seq
31:1616b
payload
15:016b
crc16
80 bits · 32-bit words · MSB → LSB
Installation
npx shadcn@latest add "https://kelvinui.com/registry/packet-diagram.json"
Props
| Prop | Type | Description |
|---|---|---|
| fields | PacketField[] | { name, bits, color? }, listed MSB → LSB |
| width | number | Bits per word/row (default 32) |
| title | string | Optional heading |
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.