diff --git a/__app/component/CopyToClipboard/README.md b/__app/component/CopyToClipboard/README.md
index ce105cf..de2d0f6 100644
--- a/__app/component/CopyToClipboard/README.md
+++ b/__app/component/CopyToClipboard/README.md
@@ -33,7 +33,7 @@
     <div>
   `} 
 >
-  Pass Copy Icon here
+  Pass clickable(button, anchor, icon etc) element here to bind onClick event
 </CopyToClipboard> 
 ```
 
@@ -50,7 +50,9 @@ const successCb = ({ msgType, msg, data }) => {
   successCb={successCb}
   successMsg="Copied Successfully"
   elementToBeCopy={`Fe-pilot library offers component like scanner, voice search, autofill otp, phonebook, share`}
-/>
+>
+  Click here to copy (Element, String, etc)
+</CopyToClipboard>
 ```
 > [!Note]
 > **successCb** will get an object contains the property ```msgType```, ```msg```, ```data```
diff --git a/__app/script/boilerPlate.js b/__app/script/boilerPlate.js
new file mode 100644
index 0000000..508feb9
--- /dev/null
+++ b/__app/script/boilerPlate.js
@@ -0,0 +1,117 @@
+// console.log('Boiler Plate');
+// console.log(process.env.COMPONENT);
+const fs = require('fs');
+const path = require('path');
+const { mkdirp } = require('mkdirp');
+
+const { COMPONENT } = process.env;
+// const srcPath = path.resolve(__dirname, '__app/component');
+const componentDir = path.resolve(`${__dirname}`, `../component/${COMPONENT}`);
+
+mkdirp(componentDir).then(() => {
+  const componentContent = `import React from 'react';
+import PropTypes from 'prop-types';
+import { handleSuccess, handleError, handleLoading } from '../services/handlerService';
+import Wrapper from '../Wrapper/Wrapper';
+
+const failureMsgDefault = {
+  unSupported: '${COMPONENT} is not supporting in your device',
+  error: 'Unable to fetch details from ${COMPONENT}',
+};
+
+function ${COMPONENT}({
+  successCb,
+  failureCb,
+  loadingCb,
+  successMsg,
+  failureMsg: failureMsgProps,
+  children,
+}) {
+  const failureMsg = { ...failureMsgDefault, ...failureMsgProps };
+
+  const get${COMPONENT} = () => {
+
+  };
+
+  return (
+    React.Children.map(children || 'PhoneBook', (child) => React.cloneElement(typeof child === 'string' ? <span>{child}</span> : child, {
+      onClick: get${COMPONENT},
+    }))
+  );
+}
+
+${COMPONENT}.isBrowserSupport = () => globalThis && true;
+
+${COMPONENT}.propTypes = {
+  successCb: PropTypes.func,
+  failureCb: PropTypes.func,
+  loadingCb: PropTypes.func,
+  successMsg: PropTypes.string,
+  failureMsg: PropTypes.object,
+};
+
+${COMPONENT}.defaultProps = {
+  successCb: () => {},
+  failureCb: () => {},
+  loadingCb: () => {},
+  successMsg: 'Phonebook details fetch Successfully',
+  failureMsg: { ...failureMsgDefault },
+};
+
+export default Wrapper(${COMPONENT});
+`;
+  const IndexContent = `import ${COMPONENT} from './${COMPONENT}';
+
+export { ${COMPONENT} };
+
+export default ${COMPONENT};
+`;
+
+  const READMEContent = `## 1. Happy Flow 
+#### a) Passing child
+
+
+
+
+## 2. Success: successCb callBack Fn along with success msg
+
+
+
+
+
+> [!Note]
+> **successCb** will get an object contains the property **msgType**, **msg**, **data**
+
+## 3. Failure: failureCb callBack Fn along with failure msg
+
+
+
+
+
+> [!Note]
+> **failureCb** will get an object contains the property **msgType**, **msg**
+
+> [!Important]
+Failure can happend due to multiple reasons, due to that reason **failureMsg** is an object having different kind of error property according to the error can occur in component
+
+## 4. Failure: Device don't support the feature and you want to hide the feauture from User
+
+
+
+
+
+> [!Note]
+> if **showForever** props value is false, feature will be hidden in case of unSupported by the device
+
+## 5. Combine with all props
+
+
+
+
+
+  `;
+
+  fs.writeFile((`${componentDir}/${COMPONENT}.js`), componentContent, () => {});
+  fs.writeFile((`${componentDir}/index.js`), IndexContent, () => {});
+  fs.writeFile((`${componentDir}/README.md`), READMEContent, () => {});
+});
diff --git a/__app/script/generateIndex.js b/__app/script/generateIndex.js
index 538f62a..24a00d8 100644
--- a/__app/script/generateIndex.js
+++ b/__app/script/generateIndex.js
@@ -29,7 +29,11 @@ const srcPath = path.resolve(__dirname, '../component');
 const components = fs.readdirSync(srcPath).filter((files) => !ignoreFiles.includes(files) && !files.includes('WIP-'));
 let count = 0;
 
+let indexImport = '';
+let indexExport = '\nexport {';
 components.forEach((component) => {
+  indexImport += `import ${component} from './${component}';\n`;
+  indexExport += `\n  ${component},`;
   const componentDir = path.resolve(`${__dirname}`, `../../${component}`);
   mkdirp(componentDir).then(() => {
     const componentFile = path.resolve(componentDir, 'index.js');
@@ -50,3 +54,5 @@ components.forEach((component) => {
     });
   });
 });
+indexExport += '\n};\n';
+fs.writeFile(('index.js'), indexImport + indexExport, () => {});
diff --git a/package.json b/package.json
index a95c133..a96e578 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
   "main": "index.js",
   "scripts": {
     "test": "echo \"Success: Verified\"",
+    "create": "node ./__app/script/boilerPlate.js",
     "start": "npm run local",
     "local": "npm run local:indexfile && npm run local:component",
     "local:indexfile": "node ./__app/script/generateIndex.js",
@@ -81,6 +82,7 @@
   "files": [
     "__build/**",
     "AutoFillOtp/",
+    "ABCD/",
     "Bluetooth/",
     "FaceDetector/",
     "CopyToClipboard/",
@@ -93,7 +95,8 @@
     "TextToSpeech/",
     "VoiceRecognition/",
     "Vibrate/",
-    "ColorPicker/"
+    "ColorPicker/",
+    "./index.js"
   ],
   "devDependencies": {
     "@babel/cli": "^7.23.9",