diff --git a/README.md b/README.md
index 39954f2..d5f9dd9 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,4 @@
+[](https://coolshap.es)
# Coolshapes
@@ -5,39 +6,28 @@
-
-### What & Why?
A simple, fun project for the sake of creating some cool-looking abstract shapes with little grainy gradients crafted by [@realvjy](https://x.com/realvjy). Coolshapes is a completely open-source set of 100+ abstract shapes crafted for any design and development projects. Free for both commercial and personal use. Licensed under MIT.
-## Table of Contents
-- [Usage](#usage)
- - [React](#react)
+### Table of Contents
+- [Installation](#installation)
+- [How to use](#how-to-use)
+ - [Global Component](#how-to-use)
+ - [Using Shape Category](#component-with-shape-category-example)
+ - [Random functions](#using-random-shape-function)
+ - [Other Methods](#other-method)
+- [Props](#props)
+- [Categories](#categories)
+- [Figma File](#figma-file)
- [Contributing](#contributing)
-- [Community](#community)
-- [License](#license)
+- [License](https://github.com/realvjy/coolshapes-react?tab=MIT-1-ov-file)
- [Credits](#credits)
-- [Sponsors](#sponsors)
-
-## Usage
-
-At its core, Coolshapes is a collection of [SVG](https://coolshap.es) files. This means that you can use this in all the same ways you can use SVGs (e.g. `img`, `background-image`, `inline`, `object`, `embed`, `iframe`).
-
-The following are ways you can use Coolshapes.
-
-
-# Coolshapes React
-Implementation of the coolshapes icon library for react applications.
+## Installation
-## How to use
-
-
-Implementation of the coolshapes icon library for web applications.
-
```sh
npm install coolshapes-react
```
@@ -47,9 +37,13 @@ or
```sh
yarn add coolshapes-react
```
-### Example
-There's a global component and component for each category of shapes. You can pass additional props to adjust the shape. These components extend from SVG elements, so they support all the props available in a SVG element.
+## How to use
+
+There are two types of components available in **Coolshapes**, which you can use: **Global component** and **Component with a category of shapes**. Then, you can pass additional [props](#props) to adjust the shapes and their properties available on Coolshapes SVG elements.
+
+#### Global component example
+Just import the Global component `Coolshape` and it will work.
```js
import { Coolshape } from 'coolshapes-react';
@@ -61,7 +55,8 @@ const App = () => {
export default App;
```
-You can import the component for specific category and simply pass the index of the shape.
+#### Component with shape category example
+You can import the component for specific category - `Star`,`Ellipse`... etc - and simply pass the index of the shape.
```js
import { Star } from 'coolshapes-react';
@@ -71,7 +66,7 @@ const App = () => {
export default App;
```
-#### Generating random shapes.
+#### Generating random shapes
setting the `random` [prop](#props) to true or leaving the `index` or `type` prop empty would replace the shape with a random shape every time it renders.
```js
// renders a random shape from any category
@@ -84,7 +79,7 @@ const Component2 = () => {
};
```
-Using random shape function.
+#### Using random shape function
```js
import { getRandomShape } from 'coolshapes-react';
```
@@ -103,8 +98,8 @@ getRandomShape({onlyId: true, type:"star"}) // returns shape identifier that can
// {shapeType: "star", index}
```
-#### others
-all the components are mapped from object that we have given you access to
+#### Other Methods
+All the components are mapped from object that we have given you access to
```js
const shapes = {
@@ -114,7 +109,7 @@ const shapes = {
}
```
-renders the shapes from all catagories
+#### Renders the shapes from all catagories
```jsx
import { shapes } from 'coolshapes-react'
@@ -148,27 +143,38 @@ const StarComponent1 = starComponents[0]
| `size` | _Number_ | 200 | The dimension of shape |
| [`type`](#categories) | _String_ | random | The category of shapes, if left empty it would randomly select a category. |
| `noise` | _Boolean_ | true | Whether to add noise to the shape or not. |
-| `index` | _Number_ | random | The index of shape within the shape [category](#categories), it will randomly select a shape from the category if type prop given |
+| `index` | _Number_ | random | The index of shape within the shape [category](#categories), it will randomly select a shape from the category if type prop given. Start from 0. |
| `random` | _Boolean_ | false | If set true it would select a random component |
-Notes:
-- Index starts from number 0, so if you want to retrive the first shape of any category, you would use the index number 0.
+**Notes:**
+Index starts from number 0, so if you want to retrive the first shape of any category, you would use the index number 0.
### Categories
-
-| type | shapes |
+There are a total of **115** shapes available in Coolshapes under the following categories.
+| name | count |
| ------------- | -------- |
-| `star` | 12 |
+| `star` | 13 |
+| `triangle` | 14 |
+| `moon` | 15 |
+| `polygon` | 8 |
+| `flower` | 16 |
+| `rectangle` | 9 |
| `ellipse` | 12 |
+| `wheel` | 7 |
+| `misc` | 11 |
+| `number` | 10 |
+
+**Note:** If you're importing directly as component, the name must be in Title case. And the category type it will be lowercase.
+
-### others
-we have have provide the `cjs`, `umd` and `es` build versions of the module,
+### Others
+There are `cjs`, `umd` and `es` included in bundled versions of the module,
#### cjs
```js
-const Coolshapes = reqiore("coolshapes-react")
+const Coolshapes = require("coolshapes-react")
```
using with react in the browser
@@ -180,7 +186,7 @@ using with react in the browser
-
+
@@ -194,3 +200,16 @@ using with react in the browser