docs: update

docs/docs/guide/getting-started/installation.md

@@ -4,13 +4,13 @@ Adding `Windi UI` to your project is relatively straightforward. Run one of the
 
 ::: code-group
   ```bash [pnpm]
-  pnpm add @windi-ui/vue
+  pnpm add @selemondev/windi-ui
   ```
   ```bash [yarn]
-  yarn add @windi-ui/vue
+  yarn add @selemondev/windi-ui
   ```
   ```bash [npm]
-  npm install @windi-ui/vue
+  npm install @selemondev/windi-ui
   ```
 :::
 
@@ -21,7 +21,7 @@ Adding `Windi UI` to your project is relatively straightforward. Run one of the
 ```ts
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}", "node_modules/@windi-ui/vue/dist/theme/*.{js,jsx,ts,tsx,vue}"],
+  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}", "node_modules/@selemondev/windi-ui/dist/theme/*.{js,jsx,ts,tsx,vue}"],
   darkMode: "class",
   theme: {
     extend: {},
@@ -43,8 +43,8 @@ To import all the components provided by `Windi UI`, add `WindiUI` in your main
 ```ts
 import { createApp } from 'vue'
 import App from './App.vue'
-import windiTheme from '@windi-ui/vue/dist/theme/windiTheme'
-import WindiUI from '@windi-ui/vue'
+import windiTheme from '@selemondev/windi-ui/dist/theme/windiTheme'
+import WindiUI from '@selemondev/windi-ui'
 
 const app = createApp(App)
 app.use(WindiUI, windiTheme)
@@ -66,11 +66,11 @@ Probably you might not want to globally register all the components but instead
 import { createApp } from 'vue'
 import './style.css'
 import App from './App.vue'
-import windiTheme from '@windi-ui/vue/dist/theme/windiTheme'
+import windiTheme from '@selemondev/windi-ui/dist/theme/windiTheme'
 
-import { WKbd, createWindiUI } from '@windi-ui/vue' // [!code ++]
+import { WKbd, createWindiUI } from '@selemondev/windi-ui' // [!code ++]
 
-import WindiUI from '@windi-ui/vue' // [!code --]
+import WindiUI from '@selemondev/windi-ui' // [!code --]
 
 const app = createApp(App)
 
@@ -130,13 +130,13 @@ To achieve this you need to do the following:
 import { createApp } from 'vue'
 import './style.css'
 import App from './App.vue'
-import windiTheme from '@windi-ui/vue/dist/theme/windiTheme'
+import windiTheme from '@selemondev/windi-ui/dist/theme/windiTheme'
 
-import { WKbd, createWindiUI } from '@windi-ui/vue' // [!code --]
+import { WKbd, createWindiUI } from '@selemondev/windi-ui' // [!code --]
 
-import { createWindiUI } from '@windi-ui/vue' // [!code ++]
+import { createWindiUI } from '@selemondev/windi-ui' // [!code ++]
 
-import WindiUI from '@windi-ui/vue' // [!code --]
+import WindiUI from '@selemondev/windi-ui' // [!code --]
 
 const app = createApp(App)
 
@@ -161,7 +161,7 @@ app.mount('#app')
 
 ```ts
 // other imports
-import { WindiUIComponentResolver } from '@windi-ui/vue'
+import { WindiUIComponentResolver } from '@selemondev/windi-ui'
 import Components from "unplugin-vue-components/vite"
 
 export default defineConfig({

packages/windi/README.md

@@ -1,40 +1,203 @@
-# windi
+<p align="center">
+<img src="./docs/docs/public/windi.svg" style="width:100px;" />
+<h1 align="center">Windi UI</h1>
+<p align="center">Build Accessible Apps 10x faster</p>
+</p>
 
-This template should help get you started developing with Vue 3 in Vite.
+## Features
 
-## Recommended IDE Setup
+- 🦾 **TypeScript Support** - Built with TypeScript in mind and from the ground up.
+- 🔥 **Icon** - Use any icon from [Iconify](https://icones.netlify.app/) in your project from your favourite icon set.
+-  🛠️ **On Demand Import** - Windi UI comes with an intelligent resolver that automatically imports only used components.
+- 📦 **Diverse Component Selection** - Create your application effortlessly with our expansive collection of 50+ UI components.
+- ⚡️ **Powerful Tools** - Windi UI is built on top of powerful tools such as TailwindCss, VueUse, Headless UI etc.
+- 🎨 **Themeable** - Customize any part of our beautiful components to match your style.
 
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+## Getting Started 
 
-## Type Support for `.vue` Imports in TS
+Add `Windi UI` to your project by running one of the following commands:
 
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
+```bash
 
-If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
+# pnpm
+pnpm add @selemondev/windi-ui
 
-1. Disable the built-in TypeScript Extension
-    1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
-    2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
-2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
+# yarn
+yarn add @selemondev/windi-ui
 
-## Customize configuration
+# npm
+npm install @selemondev/windi-ui
 
-See [Vite Configuration Reference](https://vitejs.dev/config/).
+```
+
+## Usage
+
+1. Add the Windi UI theme file and the darkMode class in your tailwind.config.cjs file as shown below:
+
+```ts
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}', 'node_modules/@selemondev/windi-ui/dist/theme/*.{js,jsx,ts,tsx,vue}'],
+  darkMode: 'class',
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+```
+
+
+### Component registration
+
+With Windi UI, you have the flexibility to register components precisely as you wish:
+
+### Import All Components
+
+To import all the components provided by `Windi UI`, add `WindiUI` in your main entry file as shown below:
+
+```ts
+import { createApp } from 'vue'
+import windiTheme from '@selemondev/windi-ui/dist/theme/windiTheme'
+import WindiUI from '@selemondev/windi-ui'
+import App from './App.vue'
+
+const app = createApp(App)
+app.use(WindiUI, windiTheme)
+app.mount('#app')
+```
+
+**By doing this, you are importing all the components that are provided by Windi UI and in your final bundle all the components including the ones you didn't use will be bundled. Use method of component registration if you are confident that you will use all the components.**
+
+
+### Individual Components with Tree Shaking
+
+Probably you might not want to globally register all the components but instead only import the components that you need. You can achieve this by doing the following: 
+
+1. Import the `createWindiUI` option as well as the components you need as shown below:
+
+```ts
+import { createApp } from 'vue'
+import './style.css'
+import windiTheme from '@selemondev/windi-ui/dist/theme/windiTheme'
+
+import { WKbd, createWindiUI } from '@selemondev/windi-ui'
+
+import App from './App.vue'
+
+const app = createApp(App)
+
+const UI = createWindiUI({
+  prefix: 'T',
+  components: [WKbd],
+})
+
+app.use(UI, windiTheme)
+
+app.mount('#app')
+```
+
+2. Now you can use the component as shown below:
+
+```js
+<template>
+  <div>
+    <TKbd>K</TKbd>
+  </div>
+</template>
+```
+
+The `prefix` option is only available for individual component imports.
+
+### Auto Imports with Tree Shaking
+
+**Windi UI** comes with an intelligent resolver that automatically imports only used components.
+
+This is made possible by leveraging a tool known as [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) which lets you auto import components on demand thus omitting import statements and still get the benefits of tree shaking.
+
+To achieve this you need to do the following: 
+
+1. Install the `unplugin-vue-components` package by running one of the following commands:
+
+```bash
+
+#pnpm
+pnpm add -D unplugin-vue-components
+
+#yarn
+yarn add -D unplugin-vue-components
+
+#npm
+npm i -D unplugin-vue-components
+
+```
+:::
+
+2. Head over to your `main.ts` or `main.js` file and set `registerComponents` to `false` as shown below:
 
-## Project Setup
+```ts
+import { createApp } from 'vue'
+import './style.css'
+import windiTheme from '@selemondev/windi-ui/dist/theme/windiTheme'
 
-```sh
-npm install
+import { createWindiUI } from '@selemondev/windi-ui'
+
+import App from './App.vue'
+
+const app = createApp(App)
+
+const UI = createWindiUI({
+  registerComponents: false,
+})
+
+app.use(UI, windiTheme)
+
+app.mount('#app')
 ```
 
-### Compile and Hot-Reload for Development
+3. Head over to your `vite.config.ts` or `vite.config.js` file and add the following:
+
+```ts
+// other imports
+import { WindiUIComponentResolver } from '@selemondev/windi-ui'
+import Components from 'unplugin-vue-components/vite'
 
-```sh
-npm run dev
+export default defineConfig({
+  plugins: [
+    // other plugins
+    Components({
+      resolvers: [
+        WindiUIComponentResolver()
+      ]
+    }),
+  ],
+})
 ```
 
-### Type-Check, Compile and Minify for Production
+4. Now you can simply use any component that you want and it will be auto imported on demand ✨
 
-```sh
-npm run build
+```js
+<template>
+  <div>
+    <WKbd>K</WKbd>
+  </div>
+</template>
 ```
+
+🥳 Well done, you can now go ahead and build your web application with ease.
+
+## Contributions
+
+Contributions are welcome and encouraged! If you have any ideas or suggestions for new features, or if you encounter any bugs or issues, please open an issue or submit a pull request on the GitHub repository. 
+
+Developers interested in contributing should read the [Code of Conduct](./CODE_OF_CONDUCT.md) and the [Contributing Guide](./CONTRIBUTING.md).
+
+## Credits
+
+- [@headlessui/vue](https://headlessui.com)
+- [@vueuse/core](https://vueuse.org)
+- [TailwindCss](https://tailwindcss.com)
+- [UnoCss](https://unocss.com) for the landing page rainbow animation.
+
+## License
+
+[MIT](./LICENSE) License © 2023 [Selemondev](https://github.com/selemondev)

packages/windi/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "windi-ui",
+  "name": "@selemondev/windi-ui",
   "version": "0.0.1-beta.0",
   "packageManager": "[email protected]",
   "description": "Build Accessible Apps 10x faster",