Hardware Spec

Hardware Spec

Structured hardware interface specification card for ICD-style documentation

Installation

npx @ravikumarsurya/mdx-ui add hardware-spec

Usage

import { HardwareSpec } from "@/components/mdx/hardware-spec";
 
<HardwareSpec
  name="USB 3.1 Gen 2"
  type="Universal Serial Bus"
  speed="10 Gbps"
  voltage="3.3V / 1.8V"
  pins={24}
  description="High-speed USB for peripheral connectivity."
/>;

Examples

USB 3.1 Gen 2
Type
Universal Serial Bus
Version
3.1 Gen 2
Speed
10 Gbps
Voltage
3.3V / 1.8V
Pins
24

High-speed USB interface for peripheral connectivity and power delivery.

USB interface

<HardwareSpec
  name="USB 3.1 Gen 2"
  type="Universal Serial Bus"
  version="3.1 Gen 2"
  speed="10 Gbps"
  voltage="3.3V / 1.8V"
  pins={24}
  protocol="SuperSpeed+"
  description="High-speed USB for external storage and device connectivity."
/>

PCIe interface

<HardwareSpec
  name="PCIe Gen 4 x4"
  type="Peripheral Component Interconnect Express"
  version="4.0"
  speed="64 GT/s"
  voltage="1.8V"
  pins={82}
  protocol="NVMe 1.4"
  description="High-bandwidth interface for NVMe SSD and accelerator cards."
/>

I2C bus (minimal fields)

Only provided fields are rendered — omit any that don't apply.

<HardwareSpec
  name="I2C Bus 0"
  speed="400 kHz"
  voltage="3.3V"
  description="Fast-mode I2C for sensor and PMIC communication."
/>

UART debug port

<HardwareSpec
  name="UART Debug Console"
  speed="115200 baud"
  voltage="1.8V"
  pins={4}
  description="Serial console for bootloader and kernel log output."
/>

Props

PropTypeDefaultDescription
namestringInterface name shown in the card header (required)
typestringFull interface type name
versionstringVersion or generation string
speedstringTransfer speed or clock frequency
voltagestringOperating voltage level(s)
pinsnumberNumber of physical pins or lanes
protocolstringProtocol or standard (e.g. NVMe, SuperSpeed+)
descriptionstringProse description rendered below the fields
classNamestringAdditional CSS classes