diff --git a/src/index.ts b/src/index.ts
index 11b4a8f..c1c63d5 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -49,3 +49,4 @@ export { MicrosdCardElement } from './microsd-card-element';
 export { DipSwitch8Element } from './dip-switch-8-element';
 export { StepperMotorElement } from './stepper-motor-element';
 export { HX711Element } from './hx711-element';
+export { RoboticArmElement } from './robotic-arm-element';
diff --git a/src/react-types.ts b/src/react-types.ts
index d01088b..c593875 100644
--- a/src/react-types.ts
+++ b/src/react-types.ts
@@ -48,6 +48,7 @@ import { MicrosdCardElement } from './microsd-card-element';
 import { DipSwitch8Element } from './dip-switch-8-element';
 import { StepperMotorElement } from './stepper-motor-element';
 import { HX711Element } from './hx711-element';
+import { RoboticArmElement } from './robotic-arm-element';
 
 type WokwiElement<T> = Partial<T> & React.ClassAttributes<T>;
 
@@ -101,6 +102,7 @@ declare global {
       'wokwi-dip-switch-8': WokwiElement<DipSwitch8Element>;
       'wokwi-stepper-motor': WokwiElement<StepperMotorElement>;
       'wokwi-hx711': WokwiElement<HX711Element>;
+      'wokwi-robotic-arm': WokwiElement<RoboticArmElement>;
     }
   }
 }
diff --git a/src/robotic-arm-element.stories.ts b/src/robotic-arm-element.stories.ts
new file mode 100644
index 0000000..469f7ae
--- /dev/null
+++ b/src/robotic-arm-element.stories.ts
@@ -0,0 +1,55 @@
+import { html } from 'lit';
+import './robotic-arm-element';
+
+export default {
+  title: 'Robotic Arm',
+  component: 'wokwi-robotic-arm',
+  argTypes: {
+    shoulderAngle: { control: { type: 'range', min: 240, max: 360 } },
+    elbowAngle: { control: { type: 'range', min: 0, max: 134 } },
+    gripperAngle: { control: { type: 'range', min: 264, max: 360 } },
+    wristAngle: { control: { type: 'range', min: 0, max: 100 } },
+    gripperColor: { control: { type: 'color' } },
+    armColor: { control: { type: 'color' } },
+    jointColor: { control: { type: 'color' } },
+  },
+  args: {
+    shoulderAngle: 240,
+    elbowAngle: 100,
+    gripperAngle: 280,
+    wristAngle: 56,
+    gripperColor: '#eeeedd',
+    armColor: '#ffffdd',
+    jointColor: '#111111',
+  },
+};
+
+const Template = ({
+  shoulderAngle,
+  elbowAngle,
+  wristAngle,
+  gripperAngle,
+  gripperColor,
+  armColor,
+  jointColor,
+}) =>
+  html`<wokwi-robotic-arm
+    shoulderAngle=${shoulderAngle}
+    elbowAngle=${elbowAngle}
+    wristAngle=${wristAngle}
+    gripperAngle=${gripperAngle}
+    gripperColor=${gripperColor}
+    armColor=${armColor}
+    jointColor=${jointColor}
+  ></wokwi-robotic-arm>`;
+
+export const Default = Template.bind({});
+Default.args = {
+  shoulderAngle: 297,
+  elbowAngle: 52,
+  wristAngle: 56,
+  gripperAngle: 270,
+  gripperColor: '#eeeedd',
+  armColor: '#ffffdd',
+  jointColor: '#111111',
+};
diff --git a/src/robotic-arm-element.ts b/src/robotic-arm-element.ts
new file mode 100644
index 0000000..f064e5b
--- /dev/null
+++ b/src/robotic-arm-element.ts
@@ -0,0 +1,209 @@
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { ElementPin } from '.';
+import { GND, VCC } from './pin';
+
+@customElement('wokwi-robotic-arm')
+export class RoboticArmElement extends LitElement {
+  /**
+   * Angle of shoulder
+   */
+  @property() shoulderAngle = 297;
+
+  /**
+   * Angle of elbow
+   */
+  @property() elbowAngle = 52;
+
+  /**
+   * Angle of wrist
+   */
+  @property() wristAngle = 56;
+
+  /**
+   * Angle of gripper
+   */
+  @property() gripperAngle = 270;
+
+  /**
+   * The color of the gripper
+   */
+  @property() gripperColor = '#eeeedd';
+
+  /**
+   * The color of the arm
+   */
+  @property() armColor = '#ffffdd';
+
+  /**
+   * The color of the joints
+   */
+  @property() jointColor = '#111111';
+
+  readonly pinInfo: ElementPin[] = [
+    { name: 'PWM1', y: 195, x: 25, number: 1, signals: [{ type: 'pwm' }] },
+    { name: 'PWM2', y: 195, x: 30, number: 2, signals: [{ type: 'pwm' }] },
+    { name: 'PWM3', y: 195, x: 35, number: 3, signals: [{ type: 'pwm' }] },
+    { name: 'PWM4', y: 195, x: 40, number: 3, signals: [{ type: 'pwm' }] },
+    { name: 'VCC', y: 195, x: 44.5, number: 4, signals: [VCC()] },
+    { name: 'GND', y: 195, x: 49, number: 5, signals: [GND()] },
+  ];
+
+  render() {
+    const { elbowAngle, wristAngle, shoulderAngle, gripperAngle } = this;
+    return html`
+      <style>
+        text {
+          user-select: none;
+        }
+      </style>
+      <svg
+        version="1.1"
+        width="70mm"
+        height="52mm"
+        viewBox="0 0 350 260"
+        xml:space="preserve"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <!-- Terminals -->
+        <g>
+          <rect x="29" y="243" width="40" height="7" fill="${this.armColor}" />
+          <rect x="32" y="250" width="1" height="9" fill="${this.jointColor}" />
+          <rect x="38" y="250" width="1" height="9" fill="${this.jointColor}" />
+          <rect x="45" y="250" width="1" height="9" fill="${this.jointColor}" />
+          <rect x="52" y="250" width="1" height="9" fill="${this.jointColor}" />
+          <rect x="58" y="250" width="1" height="9" fill="${this.jointColor}" />
+          <rect x="64" y="250" width="1" height="9" fill="${this.jointColor}" />
+        </g>
+        <g transform="translate(46.71 210.57)">
+          <!-- Shoulder -->
+          <g transform="rotate(${shoulderAngle})">
+            <path
+              transform="translate(-1.27)"
+              d="m1-36c-19.63 0-36.04 16.39-36.04 36s16.41 36 36.04 36 98.75-9 113.12-10c14.38-1 26.03-11 26.03-26s-11.65-24-26.03-26c-14.37-2-93.49-10-113.12-10z"
+              fill="${this.armColor}"
+              stroke="${this.jointColor}"
+              stroke-miterlimit="10"
+              stroke-width="2"
+            />
+
+            <!-- Elbow -->
+            <g transform="translate(113) rotate(${elbowAngle})">
+              <!-- Wrist -->
+              <g transform="translate(98) rotate(${wristAngle})">
+                <path
+                  d="m57 15c8.28-1 15-6.72 15-15s-6.72-14-15-15-45.4-6-57-6-21 9.4-21 21 9.4 21 21 21 48.72-5 57-6z"
+                  fill="${this.armColor}"
+                  stroke="${this.jointColor}"
+                  stroke-miterlimit="10"
+                  stroke-width="2"
+                />
+
+                <!-- Fingers -->
+                <g transform="translate(69.65 10.9) rotate(-${gripperAngle})">
+                  <g transform="translate(38.91 -6.36) rotate(${gripperAngle})">
+                    <path
+                      d="m-7.5 8.54c-3.47-0.41-7-3-7-7.5s3.53-7.1 7-7.5c3.47-0.41 33.33 2.61 36.19 3.11 2.91 0.51 4.81 1.81 4.81 4.5 0 2.7-1.9 4-4.81 4.5-2.86 0.5-32.72 3.29-36.19 2.89z"
+                      fill="${this.gripperColor}"
+                      stroke="${this.jointColor}"
+                      stroke-miterlimit="10"
+                      stroke-width="2"
+                    />
+                  </g>
+                  <path
+                    d="m36.5 8.14c3.47-0.41 7-3 7-7.5s-3.53-7.1-7-7.5c-3.47-0.41-31.33-1-36.19-1-4.87 0-8.81 3.8-8.81 8.5 0 4.69 3.94 8.5 8.81 8.5 4.86 0 32.72-0.6 36.19-1z"
+                    fill="${this.gripperColor}"
+                    stroke="${this.jointColor}"
+                    stroke-miterlimit="10"
+                    stroke-width="2"
+                  />
+                  <circle
+                    cx="36"
+                    cy=".64"
+                    r="3.5"
+                    fill="${this.jointColor}"
+                    stroke="${this.jointColor}"
+                    stroke-miterlimit="10"
+                    stroke-width="2"
+                  />
+                  <circle
+                    cy=".64"
+                    r="4.5"
+                    fill="${this.jointColor}"
+                    stroke="${this.jointColor}"
+                    stroke-miterlimit="10"
+                    stroke-width="2"
+                  />
+                </g>
+                <g transform="translate(69.5 -10.5) rotate(${gripperAngle})">
+                  <g transform="translate(40.91 4.68) rotate(-${gripperAngle})">
+                    <path
+                      d="m-7.5 9.54c-3.47-0.41-7-3-7-7.5s3.53-7.1 7-7.5c3.47-0.41 33.33 2.61 36.19 3.11 2.91 0.51 4.81 1.81 4.81 4.5 0 2.7-1.9 4-4.81 4.5-2.86 0.5-32.72 3.29-36.19 2.89z"
+                      fill="${this.gripperColor}"
+                      stroke="${this.jointColor}"
+                      stroke-miterlimit="10"
+                      stroke-width="2"
+                    />
+                  </g>
+                  <path
+                    d="m35.89 7.18c3.42-0.4 6.9-3 6.9-7.5s-3.48-7.09-6.9-7.5c-3.43-0.4-30.91-1-35.7-1-4.8 0-8.69 3.81-8.69 8.5 0 4.7 3.89 8.5 8.69 8.5 4.79 0 32.27-0.59 35.7-1z"
+                    fill="${this.gripperColor}"
+                    stroke="${this.jointColor}"
+                    stroke-miterlimit="10"
+                    stroke-width="2"
+                  />
+                  <circle
+                    cx="35"
+                    cy="-.32"
+                    r="3.5"
+                    fill="${this.jointColor}"
+                    stroke="${this.jointColor}"
+                    stroke-miterlimit="10"
+                    stroke-width="2"
+                  />
+                  <circle
+                    cy="-.32"
+                    r="4.5"
+                    fill="${this.jointColor}"
+                    stroke="${this.jointColor}"
+                    stroke-miterlimit="10"
+                    stroke-width="2"
+                  />
+                </g>
+              </g>
+              <path
+                d="m99 21c11.6-1 21-9.4 21-21s-9.4-20-21-21-84.64-5-99-5-26 11.64-26 26 11.64 26 26 26 87.4-4 99-5z"
+                fill="${this.armColor}"
+                stroke="${this.jointColor}"
+                stroke-miterlimit="10"
+                stroke-width="2"
+              />
+              <circle
+                r="9"
+                fill="${this.jointColor}"
+                stroke="${this.jointColor}"
+                stroke-miterlimit="10"
+                stroke-width="2"
+              />
+              <circle
+                cx="98"
+                r="8"
+                fill="${this.jointColor}"
+                stroke="${this.jointColor}"
+                stroke-miterlimit="10"
+                stroke-width="2"
+              />
+            </g>
+            <circle
+              r="12"
+              fill="${this.jointColor}"
+              stroke="${this.jointColor}"
+              stroke-miterlimit="10"
+              stroke-width="2"
+            />
+          </g>
+        </g>
+      </svg>
+    `;
+  }
+}