React Pinout Diagram
The datasheet package drawing, interactive: a QFN top view with the pin-1 dot at the marked corner and counterclockwise numbering, pads and names colored by pin type (power, ground, digital I/O, analog, clock, NC — with a legend, so color never stands alone), an optional exposed-pad marker, and a pin table that hover-syncs with the drawing in both directions. Pin count scales the body automatically; the demo is a QFN-32 MCU.
AXM-110 · QFN-32 (5×5 mm) — top view
| # | Name | Type | Description |
|---|---|---|---|
| 1 | VDD_IO | Power | 1.8 V I/O supply |
| 2 | GPIO0 | Digital I/O | GPIO / UART0_TX |
| 3 | GPIO1 | Digital I/O | GPIO / UART0_RX |
| 4 | GPIO2 | Digital I/O | GPIO / SPI0_SCK |
| 5 | GPIO3 | Digital I/O | GPIO / SPI0_MOSI |
| 6 | GPIO4 | Digital I/O | GPIO / SPI0_MISO |
| 7 | GPIO5 | Digital I/O | GPIO / SPI0_CS_N |
| 8 | GND | Ground | |
| 9 | VDD_CORE | Power | 0.9 V core supply |
| 10 | GPIO6 | Digital I/O | GPIO / I2C0_SCL |
| 11 | GPIO7 | Digital I/O | GPIO / I2C0_SDA |
| 12 | RESET_N | Digital I/O | Active-low reset, internal pull-up |
| 13 | BOOT0 | Digital I/O | Boot mode strap |
| 14 | NC | No connect | |
| 15 | XTAL_IN | Clock | 24 MHz crystal |
| 16 | XTAL_OUT | Clock | 24 MHz crystal |
| 17 | GND | Ground | |
| 18 | AIN0 | Analog | ADC input 0 |
| 19 | AIN1 | Analog | ADC input 1 |
| 20 | AIN2 | Analog | ADC input 2 |
| 21 | AIN3 | Analog | ADC input 3 |
| 22 | VREF | Analog | ADC reference |
| 23 | AVDD | Power | Analog supply |
| 24 | AGND | Ground | Analog ground |
| 25 | USB_DP | Digital I/O | USB D+ |
| 26 | USB_DM | Digital I/O | USB D− |
| 27 | VBUS_DET | Digital I/O | VBUS detect |
| 28 | SWCLK | Digital I/O | Debug clock |
| 29 | SWDIO | Digital I/O | Debug data |
| 30 | NC | No connect | |
| 31 | VDD_PLL | Power | PLL supply |
| 32 | GND | Ground |
Hover a pad or a table row — both highlight. Pin 1 sits at the marked corner, numbering runs counterclockwise.
Installation
Usage
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| packageName | string | — | Header label, e.g. package + body size |
| pins | Pin[] | — | { number, name, type, description? } in pin order |
| exposedPad | string | — | Center EP label, e.g. "EP = GND" |
type is 'power' | 'ground' | 'io' | 'analog' | 'clock' | 'nc' — it drives pad color, name color, legend, and the table badge.
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.