diff --git a/.github/assets/node-shapes-simple.png b/.github/assets/node-shapes-simple.png
new file mode 100644
index 0000000..cd00e6c
Binary files /dev/null and b/.github/assets/node-shapes-simple.png differ
diff --git a/.gitignore b/.gitignore
index 1aba88e..5b8e860 100644
--- a/.gitignore
+++ b/.gitignore
@@ -49,7 +49,7 @@ coverage/
# Generated types (if using vite-plugin-dts or tsc emit to dist)
dist/**/*.d.ts
-types/
+/types/
typings/
# Lockfiles (if you prefer to ignore some; typically keep one)
diff --git a/README.md b/README.md
index 2492982..5cee7fb 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,38 @@
-# Node Shapes
\ No newline at end of file
+# Node Shapes
+Node shapes is an npm package (node-shapes) which allow to create nodes and render them as shapes in a canvas that can be dragged (moved).
+
+[ npm package](https://www.npmjs.com/package/node-shapes)
+
+### Shapes
+You can add more custom shapes. This package have default shapes which include:
+- rectangle
+- circle (being developed)
+
+## How to Install
+To install npm package make sure you have npm installed and access to the internet.
+
+Open your terminal and under your project run the following command:
+```
+npm install node-shapes
+```
+**Note:** Make sure to run through the setup to setup shapes.
+
+## How to Setup
+To set up the shapes run the following command:
+```
+npx node-shapes init
+```
+This will create a new folder as `default-shapes` within your project's `public` folder. This folder is where all the shapes will exist. You can add custom shapes within this folder as well. To keep custom shapes organized from the default shapes, it is recommended that you keep custom shapes in there own dedicated folder created inside `public/default-shapes`.
+
+---
+## Simple Example of Usage
+The JavaScript code bellow creates a simple block that is draggable and the canvas with 20 px on all sides.
+```
+const nodeShapes = new NodeShapes("node-shapes-graph"); // declare by passing the id or the element.
+nodeShapes.canvasPadding = {inline: 20, block: 20}; // set the padding inside the canvas.
+
+const node = nodeShapes.node("Sample Text", {size: {width: "400", height: "100"}, draggable: true}); // creates the node.
+
+node.add(); // Add the node to the canvas (visual).
+```
+
\ No newline at end of file
diff --git a/bin/init.js b/bin/init.js
new file mode 100644
index 0000000..36376c1
--- /dev/null
+++ b/bin/init.js
@@ -0,0 +1,37 @@
+#!/usr/bin/env node
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+function initPackage() {
+ // 1. Locate the user's current project working directory
+ const userProjectRoot = process.cwd();
+ const targetPublicFolder = path.join(userProjectRoot, 'public', 'my-svg-package');
+
+ // 2. Locate your package's asset folder inside node_modules
+ const packageAssetFolder = path.join(__dirname, '../dist/svgs');
+
+ try {
+ // Create the target folder in their public directory if it doesn't exist
+ if (!fs.existsSync(targetPublicFolder)) {
+ fs.mkdirSync(targetPublicFolder, { recursive: true });
+ }
+
+ // 3. Copy the files over
+ const files = fs.readdirSync(packageAssetFolder);
+ for (const file of files) {
+ fs.copyFileSync(
+ path.join(packageAssetFolder, file),
+ path.join(targetPublicFolder, file)
+ );
+ }
+
+ console.log('✅ Successfully copied 100+ SVGs to your public/my-svg-package/ directory!');
+ } catch (error) {
+ console.error('❌ Failed to copy assets automatically:', error.message);
+ }
+}
+
+initPackage();
\ No newline at end of file
diff --git a/index.html b/index.html
index 0a97d59..c1fd680 100644
--- a/index.html
+++ b/index.html
@@ -9,17 +9,35 @@