diff --git a/.gitignore b/.gitignore
index af38950..4787e74 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,5 @@
 .DS_Store
-dist
 node_modules
 storybook-static
 yarn-error.log
-firebase-debug.log
\ No newline at end of file
+firebase-debug.log
diff --git a/dist/ReactCompareImage.d.ts b/dist/ReactCompareImage.d.ts
new file mode 100644
index 0000000..dfb8823
--- /dev/null
+++ b/dist/ReactCompareImage.d.ts
@@ -0,0 +1,25 @@
+import React from 'react';
+interface IProps {
+    aspectRatio?: 'taller' | 'wider';
+    handle?: React.ReactNode;
+    handleSize?: number;
+    hover?: boolean;
+    leftImage: string;
+    leftImageAlt?: string;
+    leftImageCss?: object;
+    leftImageLabel?: string | React.ReactNode;
+    leftImageLabelCss?: string;
+    onSliderPositionChange?: (position: number) => void;
+    rightImage: string;
+    rightImageAlt?: string;
+    rightImageCss?: object;
+    rightImageLabel?: string | React.ReactNode;
+    rightImageLabelCss?: string;
+    skeleton?: React.ReactNode;
+    sliderLineColor?: string;
+    sliderLineWidth?: number;
+    sliderPositionPercentage?: number;
+    vertical?: boolean;
+}
+declare const ReactCompareImage: React.FC<IProps>;
+export default ReactCompareImage;
diff --git a/dist/bundle.js b/dist/bundle.js
new file mode 100644
index 0000000..48374d4
--- /dev/null
+++ b/dist/bundle.js
@@ -0,0 +1 @@
+module.exports=function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="/dist/",r(r.s=1)}([function(e,t){e.exports=require("react")},function(e,t,r){"use strict";r.r(t);var n=r(0),o=r.n(n);function a(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function i(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?a(Object(r),!0).forEach((function(t){l(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):a(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function l(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const s=e=>{const{aspectRatio:t,handle:r,handleSize:a,hover:l,leftImage:s,leftImageAlt:u,leftImageCss:c,leftImageLabel:d,leftImageLabelCss:p,onSliderPositionChange:g,rightImage:f,rightImageAlt:b,rightImageCss:m,rightImageLabel:h,rightImageLabelCss:x,skeleton:v,sliderLineColor:w,sliderLineWidth:y,sliderPositionPercentage:L,vertical:O}=e,E=!O,[j,I]=Object(n.useState)(L),[C,S]=Object(n.useState)(0),[P,$]=Object(n.useState)(0),[R,k]=Object(n.useState)(!1),[z,A]=Object(n.useState)(!1),[D,M]=Object(n.useState)(!1),_=Object(n.useRef)(null),W=Object(n.useRef)(null),F=Object(n.useRef)(null);Object(n.useEffect)(()=>{const e=_.current,t=new ResizeObserver(([e,...t])=>{const r=e.target.getBoundingClientRect().width;S(r)});return t.observe(e),()=>t.disconnect()},[]),Object(n.useEffect)(()=>(F.current.complete&&k(!0),()=>{k(!1)}),[s]),Object(n.useEffect)(()=>(W.current.complete&&A(!0),()=>{A(!1)}),[f]);const X=z&&R;Object(n.useEffect)(()=>{const e=e=>{const t=e||window.event,r=t.touches?t.touches[0].pageX:t.pageX,n=t.touches?t.touches[0].pageY:t.pageY,o=r-window.pageXOffset,a=n-window.pageYOffset,i=W.current.getBoundingClientRect();let l=E?o-i.left:a-i.top;const s=0+y/2,u=E?C-y/2:P-y/2;l<s&&(l=s),l>u&&(l=u),I(E?l/C:l/P),g&&g(E?l/C:l/P)},r=t=>{M(!0),"touches"in t||t.preventDefault(),e(t),window.addEventListener("mousemove",e),window.addEventListener("touchmove",e)},n=()=>{M(!1),window.removeEventListener("mousemove",e),window.removeEventListener("touchmove",e)},o=_.current;if(X){o.addEventListener("touchstart",r),window.addEventListener("touchend",n),l?(o.addEventListener("mousemove",e),o.addEventListener("mouseleave",n)):(o.addEventListener("mousedown",r),window.addEventListener("mouseup",n));const a=F.current.naturalHeight/F.current.naturalWidth,i=W.current.naturalHeight/W.current.naturalWidth,s="taller"===t?Math.max(a,i):Math.min(a,i);$(C*s)}return()=>{o.removeEventListener("touchstart",r),window.removeEventListener("touchend",n),o.removeEventListener("mousemove",e),o.removeEventListener("mouseleave",n),o.removeEventListener("mousedown",r),window.removeEventListener("mouseup",n),window.removeEventListener("mousemove",e),window.removeEventListener("touchmove",e)}},[X,t,P,C,E,l,y,O]);const Y={container:{boxSizing:"border-box",position:"relative",width:"100%",height:P+"px",overflow:"hidden"},rightImage:i({clip:E?`rect(auto, auto, auto, ${C*j}px)`:`rect(${P*j}px, auto, auto, auto)`,display:"block",height:"100%",objectFit:"cover",position:"absolute",width:"100%"},m),leftImage:i({clip:E?`rect(auto, ${C*j}px, auto, auto)`:`rect(auto, auto, ${P*j}px, auto)`,display:"block",height:"100%",objectFit:"cover",position:"absolute",width:"100%"},c),slider:{alignItems:"center",cursor:!l&&E?"ew-resize":!l&&!E&&"ns-resize",display:"flex",flexDirection:E?"column":"row",height:E?"100%":a+"px",justifyContent:"center",left:E?C*j-a/2+"px":0,position:"absolute",top:E?0:P*j-a/2+"px",width:E?a+"px":"100%"},line:{background:w,boxShadow:"0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)",flex:"0 1 auto",height:E?"100%":y+"px",width:E?y+"px":"100%"},handleCustom:{alignItems:"center",boxSizing:"border-box",display:"flex",flex:"1 0 auto",height:"auto",justifyContent:"center",width:"auto"},handleDefault:{alignItems:"center",border:`${y}px solid ${w}`,borderRadius:"100%",boxShadow:"0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)",boxSizing:"border-box",display:"flex",flex:"1 0 auto",height:a+"px",justifyContent:"center",width:a+"px",transform:E?"none":"rotate(90deg)"},leftArrow:{border:`inset ${.15*a}px rgba(0,0,0,0)`,borderRight:`${.15*a}px solid ${w}`,height:"0px",marginLeft:`-${.25*a}px`,marginRight:.25*a+"px",width:"0px"},rightArrow:{border:`inset ${.15*a}px rgba(0,0,0,0)`,borderLeft:`${.15*a}px solid ${w}`,height:"0px",marginRight:`-${.25*a}px`,width:"0px"},leftLabel:{background:"rgba(0, 0, 0, 0.5)",color:"white",left:E?"5%":"50%",opacity:D?0:1,padding:"10px 20px",position:"absolute",top:E?"50%":"3%",transform:E?"translate(0,-50%)":"translate(-50%, 0)",transition:"opacity 0.1s ease-out"},rightLabel:{background:"rgba(0, 0, 0, 0.5)",color:"white",opacity:D?0:1,padding:"10px 20px",position:"absolute",left:E?null:"50%",right:E?"5%":null,top:E?"50%":null,bottom:E?null:"3%",transform:E?"translate(0,-50%)":"translate(-50%, 0)",transition:"opacity 0.1s ease-out"},leftLabelContainer:{clip:E?`rect(auto, ${C*j}px, auto, auto)`:`rect(auto, auto, ${P*j}px, auto)`,height:"100%",position:"absolute",width:"100%"},rightLabelContainer:{clip:E?`rect(auto, auto, auto, ${C*j}px)`:`rect(${P*j}px, auto, auto, auto)`,height:"100%",position:"absolute",width:"100%"}};return o.a.createElement(o.a.Fragment,null,v&&!X&&o.a.createElement("div",{style:i({},Y.container)},v),o.a.createElement("div",{style:i(i({},Y.container),{},{display:X?"block":"none"}),ref:_,"data-testid":"container"},o.a.createElement("img",{onLoad:()=>A(!0),alt:b,"data-testid":"right-image",ref:W,src:f,style:Y.rightImage}),o.a.createElement("img",{onLoad:()=>k(!0),alt:u,"data-testid":"left-image",ref:F,src:s,style:Y.leftImage}),o.a.createElement("div",{style:Y.slider},o.a.createElement("div",{style:Y.line}),r?o.a.createElement("div",{style:Y.handleCustom},r):o.a.createElement("div",{style:Y.handleDefault},o.a.createElement("div",{style:Y.leftArrow}),o.a.createElement("div",{style:Y.rightArrow})),o.a.createElement("div",{style:Y.line})),d&&o.a.createElement("div",{style:Y.leftLabelContainer},o.a.createElement("div",{style:i(i({},Y.leftLabel),p)},d)),h&&o.a.createElement("div",{style:Y.rightLabelContainer},o.a.createElement("div",{style:Y.rightLabel,className:x},h))))};s.defaultProps={aspectRatio:"taller",handle:null,handleSize:40,hover:!1,leftImageAlt:"",leftImageCss:{},leftImageLabel:null,leftImageLabelCss:"",onSliderPositionChange:()=>{},rightImageAlt:"",rightImageCss:{},rightImageLabel:null,rightImageLabelCss:"",skeleton:null,sliderLineColor:"#ffffff",sliderLineWidth:2,sliderPositionPercentage:.5,vertical:!1},t.default=s}]);
\ No newline at end of file
diff --git a/src/ReactCompareImage.tsx b/src/ReactCompareImage.tsx
index 899ff37..2aba541 100644
--- a/src/ReactCompareImage.tsx
+++ b/src/ReactCompareImage.tsx
@@ -8,12 +8,14 @@ interface IProps {
   leftImage: string;
   leftImageAlt?: string;
   leftImageCss?: object;
-  leftImageLabel?: string;
+  leftImageLabel?: string | React.ReactNode;
+  leftImageLabelCss?: string;
   onSliderPositionChange?: (position: number) => void;
   rightImage: string;
   rightImageAlt?: string;
   rightImageCss?: object;
-  rightImageLabel?: string;
+  rightImageLabel?: string | React.ReactNode;
+  rightImageLabelCss?: string;
   skeleton?: React.ReactNode;
   sliderLineColor?: string;
   sliderLineWidth?: number;
@@ -29,10 +31,12 @@ const defaultProps = {
   leftImageAlt: '',
   leftImageCss: {},
   leftImageLabel: null,
+  leftImageLabelCss: '',
   onSliderPositionChange: () => {},
   rightImageAlt: '',
   rightImageCss: {},
   rightImageLabel: null,
+  rightImageLabelCss: '',
   skeleton: null,
   sliderLineColor: '#ffffff',
   sliderLineWidth: 2,
@@ -50,11 +54,13 @@ const ReactCompareImage: React.FC<IProps> = props => {
     leftImageAlt,
     leftImageCss,
     leftImageLabel,
+    leftImageLabelCss,
     onSliderPositionChange,
     rightImage,
     rightImageAlt,
     rightImageCss,
     rightImageLabel,
+    rightImageLabelCss,
     skeleton,
     sliderLineColor,
     sliderLineWidth,
@@ -422,12 +428,16 @@ const ReactCompareImage: React.FC<IProps> = props => {
         {/* labels */}
         {leftImageLabel && (
           <div style={styles.leftLabelContainer}>
-            <div style={styles.leftLabel}>{leftImageLabel}</div>
+            <div style={{ ...styles.leftLabel, ...leftImageLabelCss }}>
+              {leftImageLabel}
+            </div>
           </div>
         )}
         {rightImageLabel && (
           <div style={styles.rightLabelContainer}>
-            <div style={styles.rightLabel}>{rightImageLabel}</div>
+            <div style={styles.rightLabel} className={rightImageLabelCss}>
+              {rightImageLabel}
+            </div>
           </div>
         )}
       </div>