Rewrite readme (#34)

* Rewrite readme

* 1.0.0

README.md

@@ -3,25 +3,62 @@
 A headless React date picker library for easily integrating date selection into your web applications.
 This library provides a flexible and highly customizable date picker, giving you complete control over the presentation and interaction with the .
 
-<!-- ![npm](https://img.shields.io/static/v1?label=&message=@zuruuh/react-date-picker&color=CB3837&logo=npm&logoColor=white) -->
-
-<!-- ![Demo](demo.gif) TODO: add slack date picker demo -->
+![npm](https://img.shields.io/static/v1?label=&message=@zuruuh/react-date-picker&color=CB3837&logo=npm&logoColor=white)
 
 ## Features
 
 - **Headless**: The library is designed to be headless, meaning you have full control over the rendering, styling, and behavior of the date picker.
 - **Highly Customizable**: Customize the appearance, style, and behavior to seamlessly integrate with your project's design.
-<!-- - **Keyboard Navigation**: Support for keyboard navigation for improved accessibility. | TODO-->
 - **Internationalization**: Supports multiple languages and date formats (powered by DayJS).
 - **Lightweight**: A small and efficient library with two runtime dependencies:
   - React (obviously) version ^18
   - DayJS
 
+## Docs
+
+You can find the docs with reference and better examples at https://date-picker.zuruh.dev
+
+## Quick Start
+
+### Installation
+
+As said above, this lib requires both react and dayjs.
+
+```bash
+npm i @zuruuh/react-date-picker dayjs react
+```
+
+We also need some specific dayjs plugin, which you can enable by copy/pasting this
+
+### Simple example
+
+```tsx
+import { DatePicker } from "@zuruuh/react-date-picker";
+//...
+const [selectDate, setSelectedDate] = useState<Dayjs | null>(null);
+
+return (
+  <DatePicker.Root selectedDate={date} setSelectedDate={setDate}>
+    <DatePicker.Calendar>
+      <DatePicker.Week>
+        <DatePicker.Day>
+          {({ date, onClick }) => (
+            <button onClick={onClick}>{date.date()}</button>
+          )}
+        </DatePicker.Day>
+      </DatePicker.Week>
+    </DatePicker.Calendar>
+  </DatePicker.Root>
+);
+```
+
+The above example will generate a flat calendar with no markup other than the buttons. You can customize the markup and styling by adding your own jsx to the example wherever you need it
+
 # Contribution
 
-Check the ![contribution guidelines](CONTRIBUTING.md) to contribute to this lib.
+Check the [contribution guidelines](CONTRIBUTING.md) to contribute to this library.
 
 ## Special thanks
 
-- The [Twemoji](https://github.com/twitter/twemoji) for the great SVGs
-- The [DayJS](https://github.com/iamkun/dayjs) team for their awesome lib
+- [Twemoji](https://github.com/twitter/twemoji) for the great SVGs
+- The [DayJS](https://github.com/iamkun/dayjs) team for their awesome library

package.json

@@ -2,7 +2,7 @@
   "$schema": "https://raw.githubusercontent.com/SchemaStore/schemastore/master/src/schemas/json/package.json",
   "name": "@zuruuh/react-date-picker",
   "private": false,
-  "version": "0.3.0",
+  "version": "1.0.0",
   "type": "module",
   "types": "./dist/index.d.ts",
   "license": "MIT",