Grammar tweaks (#1)

First pass at grammar tweaks

Author: mattlibera

alert.md

@@ -8,13 +8,13 @@ The `alert` component comes ready out-of-the-box with Blade UI Kit. Simply [inst
 
 ## Displaying Alerts
 
-The most basic usage of the `alert` component exists in flashing a message to the `alert` key:
+The most basic usage of the `alert` component is to first flash a message to the `alert` key:
 
 ```php
 session()->flash('alert', 'Settings saved successfully.');
 ```
 
-And then displaying it in your Blade view:
+And then, use the component to display it in your Blade view:
 
 ```html
 <x-alert class="bg-green-700 text-green-100 p-4" />
@@ -46,7 +46,7 @@ Reference the different types using the `type` attribute on the `alert` componen
 <x-alert type="danger" class="bg-red-700 text-red-100 p-4" />
 ```
 
-These will then render both of the flashed messages.
+These will then render all of the flashed messages.
 
 ## Composing The Content
 

avatar.md

@@ -8,7 +8,7 @@ The `avatar` component comes ready out-of-the-box with Blade UI Kit. Simply [ins
 
 ## Basic Usage
 
-The most basic usage of the `avatar` component exists in using it as a self-closing component. Search for an identifier like a username, email or domain:
+The most basic usage of the `avatar` component is as a self-closing component. Search for an identifier like a username, email or domain:
 
 ```html
 <x-avatar search="johndoe" />
@@ -40,7 +40,7 @@ And this will force unavatar to search only Gravatar images.
 
 ## Fallbacks
 
-If you'd like to provide a fallback image when not matches were found for a given search result you can use the `fallback` attribute:
+If you'd like to provide a fallback image when no matche is found for a given search result, you can use the `fallback` attribute:
 
 ```html
 <x-avatar search="johndoe" fallback="https://example.com/image.png" />
@@ -54,7 +54,7 @@ This will output the following HTML:
 
 ## User Uploaded Images
 
-The `avatar` component also allows you to pass a user uploaded image through the `src` attribute that will take precedence over the search query:
+The `avatar` component also allows you to pass a user-uploaded image through the `src` attribute that will take precedence over the search query:
 
 ```html
 <x-avatar search="johndoe" src="https://example.com/image.png" />

carbon.md

@@ -79,9 +79,9 @@ This uses Alpine to determine in which timezone the user is browsing.
 
 > Please note that you cannot combine `human` and `local` at the same time.
 
-### Formatting Local
+### Formatting with Local
 
-Formatting for with the `local` boolean attribute works a little different. You can still use the `format` attribute but instead of using [PHP's date formatting](https://www.php.net/manual/en/datetime.format.php) you'll need to use [Moment.js' date formatting options](https://momentjs.com/docs/#/displaying/format/).
+Formatting when using with the `local` boolean attribute works a little differently. You can still use the `format` attribute but instead of using [PHP's date formatting](https://www.php.net/manual/en/datetime.format.php) you'll need to use [Moment.js' date formatting options](https://momentjs.com/docs/#/displaying/format/).
 
 ```html
 <x-carbon :date="$date" local format="DD/MM/YYYY HH:mm (z)" />

checkbox.md

@@ -8,7 +8,7 @@ The `checkbox` component comes ready out-of-the-box with Blade UI Kit. Simply [i
 
 ## Basic Usage
 
-The most basic usage of the component exists in setting a `name` attribute:
+The most basic usage of the component is to set the `name` attribute:
 
 ```html
 <x-checkbox name="remember_me"/>
@@ -22,7 +22,7 @@ This will output the following HTML:
 
 ### Old Values
 
-The `checkbox` component also supports checked values that were set. For example, you might want to apply some validation in the backend and make sure the user doesn't loses their input data when you show them the form anew with the validation errors. When re-rendering the form, the `checkbox` component will remember the checked value:
+The `checkbox` component also supports checked values that were set. For example, you might want to apply some validation in the backend, but also make sure the user doesn't lose their input data when you re-render the form with any validation errors. When re-rendering the form, the `checkbox` component will remember the checked value:
 
 ```html
 <input name="remember_me" type="checkbox" id="remember_me" checked />

color-picker.md

@@ -11,7 +11,7 @@ While the `color-picker` component works out-of-the-box when you've [set the dir
 
 ## Basic Usage
 
-The most basic usage of the component exists in setting a `name` attribute:
+The most basic usage of the component is to set a `name` attribute:
 
 ```html
 <x-color-picker name="color" />
@@ -30,7 +30,7 @@ The `<div id="color"></div>` is used by Pickr to render the color picker. What's
 
 ### Old Values
 
-The `color-picker` component also supports old values that were set. For example, you might want to apply some validation in the backend and make sure the user doesn't loses their input data when you show them the form anew with the validation errors. When re-rendering the form, the `color-picker` component will remember the old value:
+The `color-picker` component also supports old values that were set. For example, you might want to apply some validation in the backend, but also make sure the user doesn't lose their input data when you re-render the form with any validation errors. When re-rendering the form, the `color-picker` component will remember the old value:
 
 ```html
 <div title="#FF0000">

community.md

@@ -1,10 +1,10 @@
 # Community
 
-Get involved into the Blade UI Kit community.
+Get involved in the Blade UI Kit community.
 
 ## Discord
 
-If you're in need of help, a second pair of eyes or a chat then [join the community on our Discord Server](https://discord.gg/Vev5CyE).
+If you're in need of help, a second pair of eyes, or a chat then [join the community on our Discord Server](https://discord.gg/Vev5CyE).
 
 ## GitHub
 

contribution-guide.md

@@ -4,23 +4,23 @@ Thank you for taking an interest in contributing to Blade UI Kit! We welcome pul
 
 ## Requesting Components
 
-We very much welcome requests for new components. But before doing so please make sure to search [the issue tracker](https://github.com/blade-ui-kit/blade-ui-kit/issues) to see if your component was requested before. A similar issue request might be open already so make sure to upvote it so it gets more attention. We'll generally focus more on components that are higher upvoted. 
+We very much welcome requests for new components. But before doing so please make sure to search [the issue tracker](https://github.com/blade-ui-kit/blade-ui-kit/issues) to see if your component was requested before. A similar issue request might be open already so make sure to upvote it so it gets more attention. We'll generally focus more on components that are most upvoted. 
 
 When requesting a component make sure to thoroughly explain what you expect the component to do. Providing an example syntax of its usage helps a lot in understanding how it should be designed. As soon as you're ready, head over to the repo and [open an issue to request a component](https://github.com/blade-ui-kit/blade-ui-kit/issues/new/choose).
 
-Your component, however might be rejected. This could be because we feel that it doesn't really belongs in the library or that we don't want to maintain it ourselves. In order to keep the library maintable we need to be critical to the amount of components we accept.
+Your component, however might be rejected. This could be because we feel that it doesn't really belongs in the library or that we don't want to maintain it ourselves. In order to keep the library maintable we need to be critical to the number of components we accept.
 
 ## Building Components
 
 If you want to build a component yourself, please make sure that you [request it first](#requesting-components) before building it. Otherwise you run the risk of it being rejected even though you've put in all the work already.
 
-When building components there's some things you need to know. First of all, every component needs a view and a class. These need to be placed in the exact same directory structures. For example, the `input` component's class is placed in `resources/views/components/forms/inputs/input.blade.php` and its class is placed in `src/Components/Forms/Inputs/Input.php`. You also need to enable the component through the config file through the `components` config option. The components here are arranged alphabetically by their class name(space).
+When building components there are some things you need to know. First of all, every component needs a view and a class. These need to be placed in the exact same directory structures. For example, the `input` component's class is placed in `resources/views/components/forms/inputs/input.blade.php` and its class is placed in `src/Components/Forms/Inputs/Input.php`. You also need to enable the component through the config file through the `components` config option. The components here are arranged alphabetically by their class name(space).
 
-Components are also fully standalone. This means you cannot reference other components in their views etc. This is to prevent conflicts with other libraries, prefixing being broken or people not being able to overwrite components anymore.
+Components are also fully standalone. This means, for instance, that you cannot reference other components inside component views. This is to prevent problems such as conflicts with other libraries, broken prefixes, or not being able to overwrite components anymore.
 
 ### Assets
 
-When you're building a component which makes use of a library that needs some CDN CSS and/or JavaScript assets you can reference the library in the `blade-ui-kit.php` config's `assets` option. Afterwards, you can load the CDN assets through the component's reserved `$assets` property:
+When you're building a component that uses some CDN CSS and/or JavaScript assets from a third-party library, you can reference the library in the `blade-ui-kit.php` config's `assets` option. Afterwards, you can load the CDN assets through the component's reserved `$assets` property:
 
 ```php
 use BladeUIKit\Components\BladeComponent;
@@ -35,4 +35,4 @@ class MyComponent extends BladeComponent
 
 ## Writing Tests
 
-When building components or contributing to the library we also encourage to write tests. Please [reference the existing test suite](https://github.com/blade-ui-kit/blade-ui-kit/tree/main/tests/Components) and create equivalent tests for new components or new component functionality.
+When building components or contributing to the library, we also encourage you to write tests. Please [reference the existing test suite](https://github.com/blade-ui-kit/blade-ui-kit/tree/main/tests/Components) and create equivalent tests for new components or new component functionality.

cron.md

@@ -1,6 +1,6 @@
 # Cron
 
-The `cron` component is a nice little convenience component that provides a way to make cron expressions human readable. I makes use of the [CRON Translator](https://github.com/lorisleiva/cron-translator) behind the hood.
+The `cron` component is a nice little convenience component that provides a way to make cron expressions human readable. It makes use of the [CRON Translator](https://github.com/lorisleiva/cron-translator) behind the hood.
 
 ## Installation
 
@@ -44,4 +44,4 @@ This will output the following HTML:
 </span>
 ```
 
-As you can see we display the human readable value and show the cron expression when you hover over it.
+As you can see, we display the human readable value and show the cron expression when you hover over it.

customization.md

@@ -14,11 +14,11 @@ php artisan buk:publish color-picker
 
 Or use the `--class` & `--view` flags as described below.
 
-In general it's important to note that if you take this approach you need to **be sensible about the things you adjust**. You can't simple rename properties and methods and expect everything to still work. Write tests for your new components and don't wander too far from the defaults. **We also don't offer any guarantee that things will keep working in future (major) versions.**
+In general it's important to note that if you take this approach you need to **be sensible about the things you adjust**. You can't simply rename properties and methods and expect everything to still work. Write tests for your new components and don't wander too far from the defaults. **We also don't offer any guarantee that things will keep working in future (major) versions.**
 
 ### Overwriting Classes
 
-You can customize component's by overwriting their classes. To start off with publishing a component's class you can use the `buk:publish` command and the `--class` flag:
+You can customize components by overwriting their classes. To start off with publishing a component's class you can use the `buk:publish` command and the `--class` flag:
 
 ```bash
 php artisan buk:publish color-picker --class
@@ -46,4 +46,4 @@ Of course, if customizing isn't your thing, or even using the library as a depen
 
 Also some credit if you copy code somewhere (prefereable in the readme of the repository) is always appreciated.
 
-And advantage to this approach is that you're less prone to breakages from the library itself with newer versions coming out but you'll lose the nicety of getting bug fixes and new features.
+An advantage to this approach is that you're less prone to breakages from the library itself with newer versions coming out, but you'll lose the nicety of getting bug fixes and new features.

dropdown.md

@@ -42,4 +42,4 @@ This will output the following HTML:
 
 As you can see, the Alpine.js toggles are applied the surrounding `div` elements. This saves you from having to re-apply these attributes all the time. 
 
-One nice use case for this are [the navbars from Tailwind UI](https://tailwindui.com/components/application-ui/navigation/navbars).
+One nice use case for this is [the navbars from Tailwind UI](https://tailwindui.com/components/application-ui/navigation/navbars).

easy-mde.md

@@ -23,11 +23,11 @@ This will output the following HTML *(inline JS has been omitted)*:
 <textarea name="about" id="about"></textarea>
 ```
 
-Which will render the Easy MDE editor.
+From there, the Easy MDE editor will be rendered.
 
 ### Old Values
 
-The `easy-mde` component also supports old values that were set. For example, you might want to apply some validation in the backend and make sure the user doesn't loses their input data when you show them the form anew with the validation errors. When re-rendering the form, the `easy-mde` component will remember the old value:
+The `easy-mde` component also supports old values that were set. For example, you might want to apply some validation in the backend, but also make sure the user doesn't lose their input data when you re-render the form with any validation errors. When re-rendering the form, the `easy-mde` component will remember the old value:
 
 ```html
 <textarea name="about" id="about">

email.md

@@ -8,7 +8,7 @@ The `email` component comes ready out-of-the-box with Blade UI Kit. Simply [inst
 
 ## Basic Usage
 
-The most basic usage of the component exists in referencing it:
+The most basic usage of the component is to simply reference it:
 
 ```html
 <x-email />
@@ -36,7 +36,7 @@ This will output the following HTML:
 
 ### Old Values
 
-The `email` component also supports old values that were set. For example, you might want to apply some validation in the backend and make sure the user doesn't loses their input data when you show them the form anew with the validation errors. When re-rendering the form, the `email` component will remember the old value:
+The `email` component also supports old values that were set. For example, you might want to apply some validation in the backend, but also make sure the user doesn't lose their input data when you re-render the form with any validation errors. When re-rendering the form, the `email` component will remember the old value:
 
 ```html
 <input name="email" type="email" id="email" value="[email protected]" />

error.md

@@ -14,7 +14,7 @@ Imagine we have the following validation errors:
 ['first_name' => 'Incorrect first name.']
 ```
 
-The most basic usage of the `error` component exists in using it as a self-closing component with a `field` attribute:
+The most basic usage of the `error` component is as a self-closing component with a `field` attribute:
 
 ```html
 <x-error field="email" class="text-red-500" />
@@ -32,7 +32,7 @@ As you can see it'll pick the error message from the `$error` message bag and re
 
 ## Composing The Content
 
-You can also opt to choose to composing how the rendered content look to. This allows you to make use of the components `messages()` method to render multiple validation errors at the same time.
+You can also opt to customize the structure of the rendered content. This allows you to make use of the component's `messages()` method to, for example, render multiple validation errors at the same time.
 
 Let's assume we have the following validation errors:
 

form-button.md

@@ -10,7 +10,7 @@ The `form-button` component comes ready out-of-the-box with Blade UI Kit. Simply
 
 ## Basic Usage
 
-The most basic usage of the component is defining an action is by setting an action and button text:
+The most basic usage of the component is by setting an action, and supplying button text:
 
 ```html
 <x-form-button :action="route('logout')" class="p-4 bg-blue-500">

form.md

@@ -10,7 +10,7 @@ The `form` component comes ready out-of-the-box with Blade UI Kit. Simply [insta
 
 ## Basic Usage
 
-The most basic usage of the `form` component exists in encapsulating some form elements and setting an `action` attribute:
+The most basic usage of the `form` component is wrapping some form elements and setting an `action` attribute:
 
 ```html
 <x-form action="http://example.com">