diff --git a/package.json b/package.json
index eb4a90f..8f027c4 100644
--- a/package.json
+++ b/package.json
@@ -72,6 +72,7 @@
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
     "@types/eslint": "^9",
+    "@types/prop-types": "^15",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^8.4.0",
@@ -84,6 +85,7 @@
     "jest-environment-jsdom": "^29.7.0",
     "postcss": "^8.4.38",
     "prettier": "^3.3.3",
+    "prop-types": "^15.8.1",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0",
     "semantic-release": "^24.0.0",
diff --git a/src/components/search/Search.stories.tsx b/src/components/search/Search.stories.tsx
index c08e89e..583e27c 100644
--- a/src/components/search/Search.stories.tsx
+++ b/src/components/search/Search.stories.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { Search } from "./Search";
 
@@ -124,9 +123,9 @@ export const AllStates: Story = {
   parameters: {
     docs: {
       description: {
-        story: "This story shows the search component in its default state. You can interact with it to see hover and focus states.",
+        story:
+          "This story shows the search component in its default state. You can interact with it to see hover and focus states.",
       },
     },
   },
 };
-
diff --git a/src/components/search/Search.tsx b/src/components/search/Search.tsx
index fb24922..27c117a 100644
--- a/src/components/search/Search.tsx
+++ b/src/components/search/Search.tsx
@@ -1,4 +1,5 @@
 import React, { forwardRef, useState } from "react";
+import PropTypes from "prop-types";
 import { cn } from "../../utils/cn";
 import searchIcon from "../../assets/search-icon.svg";
 
@@ -108,3 +109,14 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
 
 Search.displayName = "Search";
 
+Search.propTypes = {
+  containerClassName: PropTypes.string,
+  inputClassName: PropTypes.string,
+  iconClassName: PropTypes.string,
+  showIcon: PropTypes.bool,
+  size: PropTypes.oneOf(["small", "default", "large"]),
+  placeholder: PropTypes.string,
+  className: PropTypes.string,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+};
diff --git a/src/components/search/index.tsx b/src/components/search/index.tsx
index 1f72604..35e06d6 100644
--- a/src/components/search/index.tsx
+++ b/src/components/search/index.tsx
@@ -1,3 +1,2 @@
 export { Search } from "./Search";
 export type { SearchProps } from "./Search";
-
diff --git a/src/components/select/useSelectNavigate.tsx b/src/components/select/useSelectNavigate.tsx
index 844ab1b..f33cab2 100644
--- a/src/components/select/useSelectNavigate.tsx
+++ b/src/components/select/useSelectNavigate.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 import { isInViewport } from "../../utils/navigation";
 
-type ChekboxNavigateProps = {
+type CheckboxNavigateProps = {
   checkboxContainer: React.MutableRefObject<HTMLDivElement> | null;
   searchEl: React.MutableRefObject<HTMLInputElement> | null;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -12,7 +12,7 @@ const useCheckboxNavigate = ({
   checkboxContainer,
   searchEl,
   options,
-}: ChekboxNavigateProps) => {
+}: CheckboxNavigateProps) => {
   const checkboxNavIndex = useRef<number>(null);
 
   const [currentNavigateCheckbox, setcurrentNavigateCheckbox] = useState("");
diff --git a/src/stories/Configure.mdx b/src/stories/Configure.mdx
index 5157090..717600a 100644
--- a/src/stories/Configure.mdx
+++ b/src/stories/Configure.mdx
@@ -15,21 +15,23 @@ import Accessibility from "./assets/accessibility.png";
 import Theming from "./assets/theming.png";
 import AddonLibrary from "./assets/addon-library.png";
 
-export const RightArrow = () => <svg 
-    viewBox="0 0 14 14" 
-    width="8px" 
-    height="14px" 
-    style={{ 
-      marginLeft: '4px',
-      display: 'inline-block',
-      shapeRendering: 'inherit',
-      verticalAlign: 'middle',
-      fill: 'currentColor',
-      'path fill': 'currentColor'
+export const RightArrow = () => (
+  <svg
+    viewBox="0 0 14 14"
+    width="8px"
+    height="14px"
+    style={{
+      marginLeft: "4px",
+      display: "inline-block",
+      shapeRendering: "inherit",
+      verticalAlign: "middle",
+      fill: "currentColor",
+      "path fill": "currentColor",
     }}
->
-  <path d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z" />
-</svg>
+  >
+    <path d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z" />
+  </svg>
+);
 
 <Meta title="Configure your project" />
 
@@ -38,6 +40,7 @@ export const RightArrow = () => <svg
     # Configure your project
 
     Because Storybook works separately from your app, you'll need to configure it for your specific stack and setup. Below, explore guides for configuring Storybook with popular frameworks and tools. If you get stuck, learn how you can ask for help from our community.
+
   </div>
   <div className="sb-section">
     <div className="sb-section-item">
@@ -84,6 +87,7 @@ export const RightArrow = () => <svg
     # Do more with Storybook
 
     Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs.
+
   </div>
 
   <div className="sb-section">
@@ -203,6 +207,7 @@ export const RightArrow = () => <svg
           target="_blank"
         >Discover tutorials<RightArrow /></a>
     </div>
+
 </div>
 
 <style>
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index 2be0c50..171b5b3 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap");
 
 @tailwind base;
 @tailwind components;
diff --git a/src/types/images.d.ts b/src/types/images.d.ts
index 895a1f4..2f277a2 100644
--- a/src/types/images.d.ts
+++ b/src/types/images.d.ts
@@ -1,30 +1,29 @@
-declare module '*.png' {
+declare module "*.png" {
   const value: string;
   export default value;
 }
 
-declare module '*.jpg' {
+declare module "*.jpg" {
   const value: string;
   export default value;
 }
 
-declare module '*.jpeg' {
+declare module "*.jpeg" {
   const value: string;
   export default value;
 }
 
-declare module '*.svg' {
+declare module "*.svg" {
   const value: string;
   export default value;
 }
 
-declare module '*.gif' {
+declare module "*.gif" {
   const value: string;
   export default value;
 }
 
-declare module '*.webp' {
+declare module "*.webp" {
   const value: string;
   export default value;
 }
-
diff --git a/yarn.lock b/yarn.lock
index e136169..412f4c3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1485,6 +1485,7 @@ __metadata:
     "@testing-library/jest-dom": "npm:^6.4.6"
     "@testing-library/react": "npm:^16.0.0"
     "@types/eslint": "npm:^9"
+    "@types/prop-types": "npm:^15"
     "@types/react": "npm:^18.3.3"
     "@types/react-dom": "npm:^18.3.0"
     "@typescript-eslint/eslint-plugin": "npm:^8.4.0"
@@ -1498,6 +1499,7 @@ __metadata:
     jest-environment-jsdom: "npm:^29.7.0"
     postcss: "npm:^8.4.38"
     prettier: "npm:^3.3.3"
+    prop-types: "npm:^15.8.1"
     react: "npm:^17.0.0 || ^18.0.0"
     react-dom: "npm:^17.0.0 || ^18.0.0"
     semantic-release: "npm:^24.0.0"
@@ -4072,6 +4074,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/prop-types@npm:^15":
+  version: 15.7.15
+  resolution: "@types/prop-types@npm:15.7.15"
+  checksum: 10c0/b59aad1ad19bf1733cf524fd4e618196c6c7690f48ee70a327eb450a42aab8e8a063fbe59ca0a5701aebe2d92d582292c0fb845ea57474f6a15f6994b0e260b2
+  languageName: node
+  linkType: hard
+
 "@types/qs@npm:*":
   version: 6.9.15
   resolution: "@types/qs@npm:6.9.15"