Improve README

Author: BenLorantfy

README.md

@@ -1,3 +1,42 @@
-# zod-error-viewer
+<p align="center">
+  <img src="img/zod-error-viewer.png" width="200px" align="center" alt="" />
+  <h1 align="center">zod-error-viewer</h1>
+<p align="center">
+<a href="https://github.com/benlorantfy/zod-error-viewer/actions?query=branch%3Amain"><img src="https://github.com/BenLorantfy/zod-error-viewer/actions/workflows/ci.yaml/badge.svg?event=push&branch=main" alt="zod-error-viewer CI status" /></a>
+<a href="https://twitter.com/benlorantfy" rel="nofollow"><img src="https://img.shields.io/badge/created%20by-@benlorantfy-4BBAAB.svg" alt="Created by Ben Lorantfy"></a>
+<a href="https://opensource.org/licenses/MIT" rel="nofollow"><img src="https://img.shields.io/github/license/benlorantfy/zod-error-viewer" alt="License"></a>
+</p>
+  <p align="center">
+    Quickly visualize and understand even the meanest zod errors ✔️
+  </p>
+</p>
+<br/>
 
-Quickly understand zod errors visually
+<img src="./img/example.png" >
+
+## Motivation
+
+Zod is an amazing library. However, hairy zod errors can take a while to understand. The goal of `zod-error-viewer` is to drastically cut down on the time it takes to read and understand even the most complex zod errors.
+
+## Getting Started
+
+## Installing
+
+```
+npm install zod-error-viewer
+```
+
+## Basic Example
+
+```tsx
+import { ZodErrorViewer } from "zod-error-viewer";
+
+<ZodErrorViewer
+  data={/* data that was validated */}
+  error={/* ZodError that occurred */}
+/>;
+```
+
+## Documentation
+
+For more examples and documentation, see:

img/example.png

@@ -41,9 +41,11 @@
     "test": "vitest"
   },
   "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "zod": "^3.23.8"
+    "zod": ">=3"
+  },
+  "peerDependencies": {
+    "react": ">=16",
+    "react-dom": ">=16"
   },
   "lint-staged": {
     "**/*.{js,ts,tsx,jsx}": [
@@ -59,28 +61,31 @@
     "@storybook/addon-links": "^8.1.5",
     "@storybook/addon-onboarding": "^8.1.5",
     "@storybook/blocks": "^8.1.5",
-    "@storybook/react": "^8.1.5",
     "@storybook/react-vite": "^8.1.5",
+    "@storybook/react": "^8.1.5",
     "@storybook/test": "^8.1.5",
     "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.2",
-    "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
+    "@types/react": "^18.2.66",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
     "@vitejs/plugin-react": "^4.2.1",
-    "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
     "eslint-plugin-storybook": "^0.8.0",
+    "eslint": "^8.57.0",
     "happy-dom": "^14.12.0",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.5",
     "prettier": "3.3.0",
+    "react-dom": "^18.2.0",
+    "react": "^18.2.0",
     "storybook": "^8.1.5",
     "typescript": "^5.2.2",
     "vite": "^5.2.0",
-    "vitest": "^1.6.0"
+    "vitest": "^1.6.0",
+    "zod": "^3.23.8"
   }
 }