docs: fix typo (jd-solanki#121)

docs/guide/components/alert.md

@@ -68,7 +68,7 @@ You can customize close icon using `append-icon` prop.
 <!-- 👉 v-model support -->
 ::::card v-model support
 
-Alert also support `v-model` to show and hide alert based on model value.
+Alert also supports `v-model` to show and hide alert based on model value.
 
 :::code DemoAlertVModelSupport
 <<< @/components/demos/alert/DemoAlertVModelSupport.vue{4,9}

docs/guide/components/badge.md

@@ -18,7 +18,7 @@ Default variant for badge is `standard`
 <!-- 👉 Content -->
 ::::card Content
 
-Use the prop `content` to pass numeric values, if you want to use other data different than a number use the slot `content` instead
+Use the prop `content` to pass numeric values, if you want to use other data different than a number, use the slot `content` instead
 
 :::code DemoBadgeContent
 <<< @/components/demos/badge/DemoBadgeContent.vue{3,8}
@@ -40,7 +40,7 @@ You can use v-model to control hiding/showing the badge
 <!-- 👉 Color -->
 ::::card Color
 
-You can use `color` prop to change the badge color.
+You can use the `color` prop to change the badge color.
 
 :::code DemoBadgeColor
 <<< @/components/demos/badge/DemoBadgeColor.vue{5,11,17,23,29}
@@ -86,7 +86,7 @@ Change the `max` prop to cap the numeric value of the content
 
 Use `overlap` prop to adjust the position of the badge, if you need more refined adjustments you can use the `offsetX` or `offsetY` props.
 
-By default of `overlap` prop is `true`.
+By default `overlap` prop is `true`.
 
 :::code DemoBadgeOverlap
 <<< @/components/demos/badge/DemoBadgeOverlap.vue{10,18-19}

docs/guide/features/arbitrary-sizes.md

@@ -2,7 +2,7 @@
 
 Just like plain CSS or UnoCSS, Anu also provides flexibility with component sizing. You are not limited to sizes like `sm`, `lg`, `xl`, etc. With Anu you can have infinity <i class="i-fluent-emoji-infinity"></i> sizes that auto adjust the font as well.
 
-Anu mostly uses `em` unit for applying padding, height, width, etc. You can leverage this to create custom size we want just using font size utilities.
+Anu mostly uses `em` unit for applying padding, height, width, etc. You can leverage this to create custom sizes as you want by just using font size utilities.
 
 <ABtn class="text-[0.95rem]" variant="outline">Button</ABtn>
 
@@ -18,17 +18,17 @@ Anu mostly uses `em` unit for applying padding, height, width, etc. You can leve
 ```
 
 :::info
-When using arbitrary font sizes, UnoCSS don't add `line-height` along with `font-size` property so if you have line height issue, do consider adding line height styles as well.
+When using arbitrary font sizes, UnoCSS doesn't add `line-height` along with `font-size` property, so if you have line height issue, do consider adding line height styles as well.
 :::
 
 :::tip Predefined Sizes
-You can also create your own predefined sizes like `size` prop in other frameworks using custom class & shortcuts.
+You can also create your own predefined sizes like `size` prop in other frameworks using custom classes & shortcuts.
 
 ```vue
 <template>
   <ABtn class="size-xl">Button</ABtn>
 </template>
 ```
 
-Now, create a new shortcut for this `'btn': '[&.size-xl]-p-8',`. You can also take it further with dynamic shortcuts and other UnoCSS features.
+Now you can create a new shortcut for this `'btn': '[&.size-xl]-p-8',`. You can also take it further with dynamic shortcuts and other UnoCSS features.
 :::

docs/guide/features/dx-focused.md

@@ -23,11 +23,11 @@ const items = [
 
 > _DX => Developer Experience_
 
-Frameworks are nice, they helps you write more maintainable and less code. In long run, developer experience does matter.
+Frameworks are nice, they help you write more maintainable and less code. In the long run, developer experience does matter.
 
 ## Configurable Array
 
-Assume you have list like below and want to just change the size of the avatar/icon in list.
+Assume you have a list as shown below and you want to just change the size of the avatar/icon in the list.
 
 <div class="cards-demo-container">
   <ACard>
@@ -127,7 +127,7 @@ const items = [
 
 With Anu's atomic behavior, you can pass the existing props like `title`, `subtitle`, etc to certain components creating UI quickly without extra hassle.
 
-Below code will create drawer with title & subtitle. This is because `ADrawer` uses `ACard` component that in turns uses `ATypography` component.
+The code below will create a drawer with title & subtitle. This is because `ADrawer` uses `ACard` component that in turns uses `ATypography` component.
 
 ```vue
 <template>
@@ -143,14 +143,14 @@ Below code will create drawer with title & subtitle. This is because `ADrawer` u
 
 As Anu is built on top of utility classes, it has edge over the frameworks that uses SCSS or don't have utility classes.
 
-Thanks to utility classes at some point if you want to change anything regarding the component once only then utility classes can easily let you perform changes.
+Thanks to utility classes at some point if you want to change anything regarding the component once, only then can utility classes easily let you perform changes.
 
 ```vue
 <template>
   <ABtn class="px-6" >
 </template>
 ```
 
-This is customization is not limited to top level component. You can use selectors with utility classes to customize the nested component. e.g. `children-[.a-card]-rounded-3xl`
+This customization is not limited to top level component. You can use selectors with utility classes to customize the nested component. e.g. `children-[.a-card]-rounded-3xl`
 
 > _More to come..._

docs/guide/features/presets.md

@@ -1,19 +1,19 @@
 # Presets
 
-Apart from theming just colors Anu also gives full flexibility on customizing the components. Anu allows defining your own preset that changes how component should look.
+Apart from theming just colors, Anu also gives full flexibility on customizing the components. Anu allows defining your own preset that changes how components should look.
 
 With presets feature, You can even replicate Bootstrap or Material design <i class="i-fluent-emoji-exploding-head"></i>
 
-Below is example of buttons customized using preset feature to look like Bootstrap buttons:
+Below is an example of buttons customized using preset feature to look like Bootstrap buttons:
 
 ![Bootstrap buttons using anu](/images/guide/anu-bootstrap-btns.png)
 
-If you have notices in installation section, To use Anu you need to use two presets.
+If you had noticed in the installation section, to use Anu you need to use two presets.
 
 1. Anu (`presetAnu`)
 2. Theme Default (`presetThemeDefault` )
 
-`presetAnu` provides core styles for anu. These styles have nothing to do with visuals of any component.
+`presetAnu` provides core styles for Anu. These styles have nothing to do with visuals of any component.
 
 `presetThemeDefault` is where all the styling magic happens.
 
@@ -23,9 +23,9 @@ Actually, [presets](https://github.com/unocss/unocss#presets) feature is from Un
 
 ## How to customize the theme default preset?
 
-To change the look of single component, you don't have to create the preset from the scratch or copy-paste the existing preset.
+To change the look of a single component, you don't have to create the preset from scratch or copy-paste the existing preset.
 
-`presetThemeDefault` have various shortcuts that styles the component. You can overrides these shortcuts to change the look & feel of the component.
+`presetThemeDefault` have various shortcuts that styles the component. You can override these shortcuts to change the look & feel of the component.
 
 ```ts
 presetThemeDefault({
@@ -41,4 +41,4 @@ Creating your own UnoCSS preset is really simple. We recommend you first checkou
 
 Next, you can refer to our `presetThemeDefault` preset to create you own preset.
 
-> _If you want more details feel free to let us know that you are building your own preset so we can focus more on this part of documentation._
+> _If you want more details, feel free to let us know that you are building your own preset so we can focus more on this part of documentation._

docs/guide/features/theme.md

@@ -35,7 +35,7 @@ Assume your theme color is `#5563fd`. Just convert it to [hsl](https://developer
 
 Done 🥳
 
-If you want to change CSS variant in dark theme just update the selector:
+If you want to change the CSS variant in the dark theme, just update the selector:
 
 ```diff
 - :root
@@ -44,9 +44,9 @@ If you want to change CSS variant in dark theme just update the selector:
 
 ## How to create custom theme?
 
-Creating custom theme is as easy as defining new values for existing CSS variables.
+Creating a custom theme is as easy as defining new values for the existing CSS variables.
 
-Create new CSS selector for `:root` with theme name (assuming `coffee`) and write down CSS variables with desired values:
+Create a new CSS selector for `:root` with the theme name (assuming `coffee`) and write down the CSS variables with the desired values:
 
 ```css
 :root.coffee {
@@ -55,6 +55,6 @@ Create new CSS selector for `:root` with theme name (assuming `coffee`) and writ
 }
 ```
 
-Now just add class `coffee` to html element: `html.coffee`.
+Now just add class `coffee` to the html element: `html.coffee`.
 
 Don't forget to include the CSS file in your entrypoint 😜

docs/guide/getting-started/customization.md

@@ -20,7 +20,7 @@ const updatePrimaryColor = () => {
 
 Anu uses [HSL](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl) color format to define colors. You can configure theme colors via [CSS variables(custom properties)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties).
 
-To customize theme color, set CSS variable in your CSS with color name prefixed with `a-` (_e.g. `--a-primary`_). Below is list of colors you can configure.
+To customize theme color, set a CSS variable in your CSS with color name prefixed with `a-` (_e.g. `--a-primary`_). Below is the list of colors you can configure.
 
 <div class="flex gap-6 flex-wrap">
     <ACard variant="fill" color="primary" class="rounded-2xl shadow-2xl shadow-primary shadow-opacity-40 w-26 h-26 font-semibold grid place-items-center">Primary</ACard>
@@ -46,11 +46,11 @@ Interesting ones are listed below:
 
 ## Component customization
 
-All UI configurable styles are applied using theme preset. If you have noticed in installation section there's preset `presetThemeDefault`.
+All the UI configurable styles are applied using theme preset. If you have noticed in installation section there's a preset called `presetThemeDefault`.
 
-`presetThemeDefault` have various shortcuts that styles the component. You can overrides these shortcuts to change the look & feel of the component.
+`presetThemeDefault` have various shortcuts that styles the component. You can override these shortcuts to change the look & feel of the component.
 
-To override those shortcuts use `shortcutOverrides` option like below:
+To override those shortcuts use `shortcutOverrides` option as shown below:
 
 ```ts
 presetThemeDefault({
@@ -63,15 +63,15 @@ presetThemeDefault({
 Guess, how our button will look like?
 
 :::details View answer
-It's bootstrap button 🤯
+It's a bootstrap button 🤯
 
 Just change the colors to Bootstrap's color and see the magic 😍
 ![Bootstrap buttons using anu](/images/guide/anu-bootstrap-btns.png)
 :::
 
 You can refer to available shortcuts in [this](https://github.com/jd-solanki/anu/blob/main/packages/anu-vue/src/presets/theme-default/index.ts) file.
 
-If you like this simple customization don't forget to give a **star on Github**. If you don't like it give triple star 😉.
+If you like this simple customization don't forget to give a **star on Github**. If you don't like it give a triple star 😉.
 
 <a class="!hover:opacity-100 !no-underline" href="https://github.com/jd-solanki/anu" rel="noopener noreferrer" target="_blank">
     <ABtn class="text-sm my-2" icon="i-bx-star" variant="light" href="https://github.com/jd-solanki/anu" tag="a">

docs/guide/getting-started/index.md

@@ -7,16 +7,16 @@
 - Yes, there's UnoCSS, TailwindCSS, etc but they don't provide ready to use components
 - DX Focused. You will enjoy writing code 💯
 - [Configure UI](/guide/base-components/typography.html#config-array) using array instead of writing component's markup again to override
-- It is for lazy people by lazy person
-- I co-authored premium templates like [Vuexy](https://themeforest.net/item/vuexy-vuejs-html-laravel-admin-dashboard-template/23328599), [Materio](https://themeselection.com/item/materio-vuetify-vuejs-admin-template), etc so you can expect neat & lovable UI from anu.
-- Thanks to UnoCSS, VueUse, etc You can build your desired UI  & functionalities in no time using battle tested features.
-- Customization is a piece of cake with anu. It is as simple as overriding an object 🤯
+- It is for lazy people by a lazy person
+- I co-authored premium templates such as [Vuexy](https://themeforest.net/item/vuexy-vuejs-html-laravel-admin-dashboard-template/23328599), [Materio](https://themeselection.com/item/materio-vuetify-vuejs-admin-template), etc so you can expect neat & lovable UI from Anu.
+- Thanks to UnoCSS, VueUse, etc You can now build your desired UI  & functionalities in no time using battle tested features.
+- Customization is a piece of cake with Anu. It is as simple as overriding an object 🤯
 
 ## Motivation
 
-I work at [ThemeSelection](https://themeselection.com) and for couple of times I had to build small Vue projects that required UI flexibility. I couldn't use Bootstrap because customization is not straight forward compared to frameworks like UnoCSS, WindiCSS & TailwindCSS.
+I work at [ThemeSelection](https://themeselection.com) and for a couple of times I had to build small Vue projects that required UI flexibility. I couldn't use Bootstrap because customization is not straight forward compared to frameworks like UnoCSS, WindiCSS & TailwindCSS.
 
-Then there's a guy named [@antfu](https://github.com/antfu) who is great inspiration to me. He built great tools for vue ecosystem and I was using them in my every vue projects. Now the problem was repating the configuration & components in every project and there wasn't any component lib based on frameworks like UnoCSS to provide components for building UI quickly and provide enough flexibility.
+Then there's a man I really look up to by the name of [@antfu](https://github.com/antfu) who is a great inspiration to me. He has built great tools for the Vue ecosystem and I used them in all of my Vue projects. Now the issue at hand was that setup and components had to be repeated in each project, and there was no component library based on frameworks like UnoCSS to offer components for rapidly and sufficiently constructing UI.
 
 Hence, I created this UI lib which provides ready to use beautiful components with utilities to build UI quickly.
 
@@ -26,4 +26,4 @@ You probably didn't read the UnoCSS [README](https://github.com/unocss/unocss#re
 
 ### Why dependencies
 
-Anu is based on [UnoCSS](https://github.com/unocss/unocss), [VueUse](https://vueuse.org/) & [Floating UI](https://floating-ui.com/). Anu have this dependencies because there's a saying "_Don't reinvent the wheel_".
+Anu is based on [UnoCSS](https://github.com/unocss/unocss), [VueUse](https://vueuse.org/) & [Floating UI](https://floating-ui.com/). Anu is dependent on these dependencies because there is a saying that goes, "_Don't reinvent the wheel_."

docs/guide/getting-started/installation.md

@@ -29,7 +29,7 @@
     }
     ```
 
-2. Create UnoCSS Config file `uno.config.js` in root of the project with below content:
+2. Create the UnoCSS Config file `uno.config.js` in the root of the project with the content below:
 
     ```ts
     import { presetAnu, presetIconExtraProperties } from 'anu-vue'
@@ -58,7 +58,7 @@
     })
     ```
 
-3. Update your `main.js` file like below:
+3. Update your `main.js` file as shown below:
 
     ```js{3,5-6,8-9,13,11-12,15-16}
     import { createApp } from 'vue'
@@ -96,7 +96,7 @@ Now, Just refer to the component in your vue files:
 
 <br>
 
-Probably you might not want to globally register the components. You can also follow below approaches:
+Probably you might not want to globally register the components. You can also follow the approaches below:
 
 ### Tree Shaking
 
@@ -112,7 +112,7 @@ You can also follow À la carte fashion if you don't want to register all the co
         .mount('#app')
     ```
 
-2. Now, import components individually from `anu-vue`
+2. Now import the components individually from `anu-vue`
 
     ```vue
     <script setup>
@@ -128,7 +128,7 @@ You can also follow À la carte fashion if you don't want to register all the co
 
 [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) lets you auto import components on demand. With this you can omit import statement and still get benefits of tree shaking.
 
-1. Remove anu plugin use in `main.js` file if you haven't
+1. Remove the anu plugin in the `main.js` file if you haven't
 
     ```diff
     -  import { anu } from 'anu-vue'
@@ -151,7 +151,7 @@ You can also follow À la carte fashion if you don't want to register all the co
     npm i -D unplugin-vue-components
     ```
 
-3. Add following in `vite.config.js`:
+3. Add the following in `vite.config.js`:
 
     ```js
     // other imports
@@ -172,7 +172,7 @@ You can also follow À la carte fashion if you don't want to register all the co
     })
     ```
 
-4. Now, just use components the component and it will be auto imported on demand 🤯
+4. Now just use the component and it will be auto imported on demand 🤯
 
     ```vue
     <template>
@@ -195,7 +195,7 @@ You can also follow À la carte fashion if you don't want to register all the co
     npm install @anu-vue/nuxt && npm install -D @unocss/nuxt
     ```
 
-2. Add Anu & UnoCSS in nuxt modules
+2. Add Anu & UnoCSS in the nuxt modules array in the `nuxt.config.ts` file as shown below: 
 
     ```ts
     import { defineNuxtConfig } from 'nuxt/config'
@@ -205,7 +205,7 @@ You can also follow À la carte fashion if you don't want to register all the co
     })
     ```
 
-3. Add UnoCSS config file `uno.config.ts` with this configuration
+3. Add UnoCSS config file `uno.config.ts` with the configuration shown below:
 
     ```ts
     import { defineConfig } from 'unocss'
@@ -215,7 +215,7 @@ You can also follow À la carte fashion if you don't want to register all the co
     })
     ```
 
-It's done, Let's try button component 🥳
+It's done, Let's try the button component 🥳
 
 ```vue
 <template>
@@ -225,7 +225,7 @@ It's done, Let's try button component 🥳
 
 ## Volar Support
 
-If you are using [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar), you can specify global component types by adding below configuration in your [`jsconfig.json`](https://code.visualstudio.com/docs/languages/jsconfig).
+If you are using [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar), you can specify global component types by adding the configuration below in your [`jsconfig.json`](https://code.visualstudio.com/docs/languages/jsconfig).
 
 ```json
 {
@@ -236,6 +236,6 @@ If you are using [Volar](https://marketplace.visualstudio.com/items?itemName=Vue
 }
 ```
 
-If you have typescript project, you have to configure above in `tsconfig.json` file.
+If you have a typescript project, you will have to configure the above in the `tsconfig.json` file.
 
 That's it, enjoy the autocompletion 🥳