diff --git a/package.json b/package.json
index 9ae0635..97ebf19 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
   "author": "Paweł Stachula",
   "license": "MIT",
   "homepage": "https://simple-headless-carousel.onrender.com/",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "sideEffects": false,
   "description": "React simple headless carousel",
   "keywords": [
@@ -38,7 +38,9 @@
     "build:css": "NODE_ENV=production tailwindcss -o dist/styles.min.css -m",
     "build:npm": "npm run build:lib && LIB_MODE=lib npm run build:css"
   },
-  "files": ["/dist"],
+  "files": [
+    "/dist"
+  ],
   "main": "dist/simple-headless-carousel.umd.cjs",
   "module": "dist/simple-headless-carousel.js",
   "types": "dist/index.d.ts",
@@ -55,25 +57,25 @@
     "react-dom": "16.x || 17.x || 18.x"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^13.2.0",
+    "@testing-library/user-event": "^14.5.2",
     "@types/node": "^20.14.3",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
     "@vitejs/plugin-react": "^4.2.1",
+    "@vitest/ui": "latest",
     "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
-    "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^13.2.0",
-    "@testing-library/user-event": "^14.5.2",
-    "@vitest/ui": "latest",
-    "jsdom": "^24.0.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^18.0.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
+    "jsdom": "^24.0.0",
     "postcss": "^8.4.38",
     "prettier": "^3.0.3",
     "prettier-plugin-tailwindcss": "^0.5.14",
diff --git a/src/App.tsx b/src/App.tsx
index 6397921..64df347 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,62 +1,46 @@
-import {
-  Carousel,
-  CarouselProvider,
-  Counter,
-  DotsGroup,
-  NextButton,
-  PrevButton,
-  Slide,
-} from './lib/simple-headless-carousel';
+import { ExampleCarousel } from './examples/singleStep';
 
 function App() {
   return (
-    <div className="h-dvh w-full bg-gray-800 font-bold  text-white">
+    <div className="w-full bg-gray-800 font-bold  text-white">
       <div className="mx-auto flex max-w-3xl flex-col gap-6 pt-10 text-center">
         <h1 className="my-6 text-3xl">React Simple Headless Carousel Demo</h1>
 
-        <CarouselProvider
-          autoPlayDelay={2000}
-          autoPlay={false}
-          slidesVisible={2}
-          infinite
-          step={2}
-          total={5}
-        >
-          <Carousel>
-            <Slide index={0}>
-              <img alt="" src="/imgs/img1.jpg" />
-            </Slide>
-            <Slide index={1}>
-              <img alt="" src="/imgs/img2.jpg" />
-            </Slide>
-            <Slide index={2}>
-              <img alt="" src="/imgs/img3.jpg" />
-            </Slide>
-            <Slide index={3}>
-              <img alt="" src="/imgs/img4.jpg" />
-            </Slide>
-            <Slide index={4}>
-              <img alt="" src="/imgs/img5.jpg" />
-            </Slide>
-          </Carousel>
+        <div className="my-4">
+          <h2 className="my-2 text-2xl">Basic example</h2>
+          <ExampleCarousel />
+          <pre className="my-4 rounded-lg bg-gray-900 p-4 text-left font-mono font-normal text-white">
+            <code>
+              {`
+<CarouselProvider
+  total={5}
+>
+  <Carousel>
+    <Slide index={0}>
+      <img src="/imgs/img1.jpg" />
+    </Slide>
+    <Slide index={1}>
+      <img src="/imgs/img2.jpg" />
+    </Slide>
+    <Slide index={2}>
+      <img src="/imgs/img3.jpg" />
+    </Slide>
+    <Slide index={3}>
+      <img src="/imgs/img4.jpg" />
+    </Slide>
+    <Slide index={4}>
+      <img src="/imgs/img5.jpg" />
+    </Slide>
+  </Carousel>
 
-          <div className="flex justify-center">
-            <DotsGroup />
-          </div>
-
-          <div className="flex justify-center gap-2">
-            <span>Counter:</span>
-            <Counter />
-          </div>
-          <div className="flex justify-center gap-4">
-            <PrevButton className="rounded-md border px-4 py-1">
-              Prev
-            </PrevButton>
-            <NextButton className="rounded-md border px-4 py-1">
-              Next
-            </NextButton>
-          </div>
-        </CarouselProvider>
+  <DotsGroup />
+  <Counter />
+  <PrevButton className="rounded-md border px-4 py-1">Prev</PrevButton>
+  <NextButton className="rounded-md border px-4 py-1">Next</NextButton>
+</CarouselProvider>`}
+            </code>
+          </pre>
+        </div>
       </div>
     </div>
   );
diff --git a/src/examples/singleStep.tsx b/src/examples/singleStep.tsx
new file mode 100644
index 0000000..7c62a92
--- /dev/null
+++ b/src/examples/singleStep.tsx
@@ -0,0 +1,70 @@
+import {
+  CarouselProvider,
+  Carousel,
+  Slide,
+  DotsGroup,
+  Counter,
+  PrevButton,
+  NextButton,
+  type CarouselState,
+} from '../lib/simple-headless-carousel';
+
+export const ExampleCarousel = ({
+  autoPlayDelay,
+  autoPlay,
+  slidesVisible,
+  infinite,
+  step,
+  disableTouch,
+  lazy,
+  threshold,
+  currentIndex,
+}: Partial<CarouselState>) => {
+  return (
+    <div className="flex flex-col gap-6 text-center">
+      <CarouselProvider
+        autoPlayDelay={autoPlayDelay}
+        autoPlay={autoPlay}
+        slidesVisible={slidesVisible}
+        infinite={infinite}
+        step={step}
+        disableTouch={disableTouch}
+        lazy={lazy}
+        threshold={threshold}
+        currentIndex={currentIndex}
+        total={5}
+      >
+        <Carousel>
+          <Slide index={0}>
+            <img alt="" src="/imgs/img1.jpg" />
+          </Slide>
+          <Slide index={1}>
+            <img alt="" src="/imgs/img2.jpg" />
+          </Slide>
+          <Slide index={2}>
+            <img alt="" src="/imgs/img3.jpg" />
+          </Slide>
+          <Slide index={3}>
+            <img alt="" src="/imgs/img4.jpg" />
+          </Slide>
+          <Slide index={4}>
+            <img alt="" src="/imgs/img5.jpg" />
+          </Slide>
+        </Carousel>
+
+        <div className="flex justify-center">
+          <DotsGroup />
+        </div>
+
+        <div className="flex justify-center gap-2">
+          <span>Counter:</span>
+          <Counter />
+        </div>
+        <div className="flex justify-center gap-4">
+          <PrevButton className="rounded-md border px-4 py-1">Prev</PrevButton>
+          <NextButton className="rounded-md border px-4 py-1">Next</NextButton>
+        </div>
+      </CarouselProvider>
+    </div>
+  );
+};
diff --git a/src/lib/simple-headless-carousel/components/Carousel.tsx b/src/lib/simple-headless-carousel/components/Carousel.tsx
index 2e8c91d..b0d331f 100644
--- a/src/lib/simple-headless-carousel/components/Carousel.tsx
+++ b/src/lib/simple-headless-carousel/components/Carousel.tsx
@@ -61,9 +61,6 @@ export const Carousel = memo(
     };
 
     const setCurrentIndex = useCallback(
-    
-    
-    
       (value: number) => {
         dispatch({ action: 'setCurrentIndex', value });
       },
@@ -72,8 +69,6 @@ export const Carousel = memo(
 
     const setTranslateX = useCallback(
       (diffX: number) => {
-        // diffX = X%
-        // fullSize = 100%(fullSize)
         animationRef.current = requestAnimationFrame(() => {
           const percentX = (diffX * fullSize) / width / total;