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
PowerDigital I/OGroundNo connectClockAnalog
| # | 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
npx shadcn@latest add pinout.json
Usage
Loading...
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.