docs: updated docs

Author: Justin Kimbrell

README.md

@@ -25,4 +25,49 @@ This monorepo utilizes [VitePress](https://vuejs.github.io/vitepress/v1/) for de
 ```bash
 pnpm docs:dev
 ```
-This will open VitePress on `localhost:5173`.
+This will open VitePress on `localhost:5173`.
+
+## Versioning
+
+Each package is independently versioned using strict [semantic versioning](https://semver.org/). The monorepo uses [Changesets](https://akinoccc.github.io/changesets/) to manage versions and changelogs for all packages independently. When a package introduces a change, only that package receives a version bump and other packages remain unaffected.
+
+### Creating a Changeset
+After making changes to one or more packages, create a changeset to document what changed:
+
+::: code-group
+```bash [pnpm]
+pnpm changeset
+```
+
+```bash [yarn]
+yarn changeset
+```
+:::
+
+This interactive command will:
+
+1. Ask which packages changed - Select the packages you modified (use spacebar to select, enter to confirm)
+2. Ask for version bump type - Choose the semantic version bump for each package:
+    - major - Breaking changes (e.g., removing a prop, changing API)
+    - minor - New features (e.g., adding a new prop, new functionality)
+    - patch - Bug fixes (e.g., fixing a rendering issue)
+3. Ask for a summary - Write a brief description of the change (this appears in the changelog)
+
+### Example CLI Workflow
+
+```bash
+🦋 Which packages would you like to include?
+  ◉ @vue-interface/input-field ← Select this package (press space)
+  ◯ @vue-interface/btn
+  ◯ @vue-interface/form-control
+ 
+🦋 What kind of change is this for @vue-interface/input-field?
+  major (breaking change)
+  minor (new feature)
+  ❯ patch (bug fix) ← Select this option (press space)
+
+🦋 Please enter a summary:
+  Fix styling error when input is disabled
+```
+
+The Changesets CLI then generates a markdown file in the .changeset/ directory with a random name (e.g., cool-lions-dance.md).

docs/.vitepress/config.mts

@@ -15,7 +15,7 @@ function generatePackagesSidebar() {
   	for (const line of lines) {
   	  	const indent = line.match(/^\s*/)?.[0].length ?? 0
   	  	const [, text, link] = line.match(/\[([^\]]+)\]\(([^)]+)\)/) || []
-  	  	const item: any = { text: text || line.replace(/^\s*-\s*/, '').trim(), ...(link && { link }) }
+  	  	const item: any = { text: text || line.replace(/^\s*-\s*/, '').trim(), ...(link && { link: link.replace(/\/packages\/([^\/]+)\/docs\/(.+)/, '/packages/$2') }) }
 
   	  	while (indent <= stack[stack.length - 1].indent) stack.pop()
   	  	stack[stack.length - 1].items.push(item)
@@ -32,7 +32,9 @@ export default defineConfig({
   	srcExclude: ['**/node_modules/**', '**/dist/**'],
 
 	rewrites: {
-		'docs/index.md': 'index.md'
+		'docs/:slug*': ':slug*',
+		// 'packages/:pkg/docs/:pkg.md': 'packages/:pkg',
+		'packages/:pkg/docs/:slug*': 'packages/:slug*',
 	},
 
 	vite: {

docs/about.md

@@ -1,93 +1,23 @@
-# Vue Interface
+# Why Vue Interface?
 
-This is a monorepo for the [components](/docs/packages) of [Vue Interface](https://github.com/vue-interface). Components are organized  in packages. The purpose of this monorepo is to provide a convenient and efficient way to develop and maintain UI components that are dependent on each other without relying on symlinks and other hacks that provide less than optimal development experiences. The goal is provide a collection of CLI tools so you can develop, version and publish for individual packages.
+**Vue Interface** is the solid foundation for your next masterpiece—built for speed, performance, and stunning design. We empower you to build exactly what you envision without fighting the library.
 
-## Developing
+## 🚀 Built for the Future
 
-To start developing in the mono repo run the following commands. `pnpm install` should be ran the first time, after anything package.json updates or when adding another submodule.
+### Modular by Design
+Install strictly what you use. Our scoped, independent packages keep your application lean and fast.
 
-```bash
-pnpm install
-pnpm dev
-```
+### Tailwind Native
+Built on **Tailwind CSS v4**. Override styles and extend components instantly using the utility classes you know and love.
 
-## Versioning
+### TypeScript First
+Written in **TypeScript** from the ground up for first-class type inference and a confident, error-free developer experience.
 
-Each package is independently versioned using strict [semantic versioning](https://semver.org/). The monorepo uses [Changesets](https://akinoccc.github.io/changesets/) to manage versions and changelogs for all packages independently. When a package introduces a change, only that package receives a version bump and other packages remain unaffected.
+### Accessible & Inclusive
+Inclusive by default. We follow **WAI-ARIA** best practices, ensuring support for keyboard navigation and screen readers.
 
-### Creating a Changeset
-After making changes to one or more packages, create a changeset to document what changed:
+---
 
-::: code-group
-```bash [pnpm]
-pnpm changeset
-```
+### Ready for your next project?
 
-```bash [yarn]
-yarn changeset
-```
-:::
-
-This interactive command will:
-
-1. Ask which packages changed - Select the packages you modified (use spacebar to select, enter to confirm)
-2. Ask for version bump type - Choose the semantic version bump for each package:
-    - major - Breaking changes (e.g., removing a prop, changing API)
-    - minor - New features (e.g., adding a new prop, new functionality)
-    - patch - Bug fixes (e.g., fixing a rendering issue)
-3. Ask for a summary - Write a brief description of the change (this appears in the changelog)
-
-### Example CLI Workflow
-
-```bash
-🦋 Which packages would you like to include?
-  ◉ @vue-interface/input-field ← Select this package (press space)
-  ◯ @vue-interface/btn
-  ◯ @vue-interface/form-control
- 
-🦋 What kind of change is this for @vue-interface/input-field?
-  major (breaking change)
-  minor (new feature)
-  ❯ patch (bug fix) ← Select this option (press space)
-
-🦋 Please enter a summary:
-  Fix styling error when input is disabled
-```
-
-The Changesets CLI then generates a markdown file in the .changeset/ directory with a random name (e.g., cool-lions-dance.md).
-
-## Publishing
-
-The monorepo uses GitHub Actions with Changesets to automatically publish packages to npm. The workflow is fully automated and handles versioning, changelog generation, and publishing. Ensure the following exists in the workspace in `.github/workflows/release.yaml` and Github actions will do the rest.
-
-```yaml
-release:
-  name: Release
-  runs-on: ubuntu-latest
-  steps:
-    - name: Checkout Repo
-      uses: actions/checkout@v4
-      with:
-        fetch-depth: 0
-    - name: Setup Node.js
-      uses: actions/setup-node@v4
-      with:
-        node-version: 22
-        cache: pnpm
-    - name: Install Dependencies 🔌
-      run: pnpm install --frozen-lockfile
-    - name: Run Tests
-      run: pnpm vitest run --coverage
-    - name: Build Packages
-      run: pnpm build
-    - name: Create Release Pull Request or Publish to npm 🪧
-      id: changesets
-      uses: changesets/action@v1
-      with:
-        publish: pnpm release 
-        version: pnpm version  
-        commit: "chore: version bump from changesets"
-      env:
-        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-```
+[Get Started with Vue Interface](/docs/getting-started)

docs/api-examples.md

@@ -1,23 +1,54 @@
 # Getting Started
 
+Vue Interface is a modular collection of [Vue 3](https://vuejs.org/) components styled with [Tailwind CSS](https://tailwindcss.com/). Each component is published as a separate package, allowing you to install only what you need.
+
+## Prerequisites
+
+- **Vue**: ^3.3.4
+- **Tailwind CSS**: ^4.0.0
+
 ## Installation
 
-Install using a package manager like [pnpm](https://pnpm.io), [yarn](https://yarnpkg.com/), or [npm](https://www.npmjs.com).
-  
+Since Vue Interface is modular, you install specific packages rather than a single library. For example, to install the Input Field and Form Control packages:
+
 ::: code-group
 ```bash [pnpm]
-pnpm i vue-interface
+pnpm add @vue-interface/input-field @vue-interface/form-control
 ```
 
 ```bash [yarn]
-yarn add vue-interface
+yarn add @vue-interface/input-field @vue-interface/form-control
 ```
 
 ```bash [npm]
-npm i vue-interface
+npm install @vue-interface/input-field @vue-interface/form-control
 ```
 :::
 
-## Basic Usage
+Be sure to also install any peer dependencies if warned by your package manager.
+
+## Usage
+
+### Importing Components
+
+Import the component directly from the package in your Vue files.
+
+```vue
+<script setup>
+import { InputField } from '@vue-interface/input-field';
+</script>
+
+<template>
+    <InputField name="example" label="Example Input" />
+</template>
+```
+
+### Styling
+
+The components rely on Tailwind CSS for styling. You must import the CSS file provided by each package. This ensures that the component's specific Tailwind classes and custom styles are applied.
+
+```javascript
+import '@vue-interface/form-control/index.css';
+```
 
-@todo - Add some basic usage here.
+Alternatively, if you are using a bundler that supports CSS injection or if you want to include all styles globally, consult the specific package documentation for the best approach.

docs/getting-started.md

@@ -1,25 +1,24 @@
 ---
-# https://vitepress.dev/reference/default-theme-home-page
 layout: home
 
 hero:
   name: "Vue Interface"
-  # text: ""
-  tagline: Complete documentation for the Vue Interface component library
+  tagline: A collection of scoped, styled, and accessible Vue 3 components built with Tailwind CSS v4.
   actions:
     - theme: brand
       text: Getting Started
       link: /docs/getting-started
     - theme: alt
-      text: About
-      link: /docs/about
+      text: View Packages
+      link: /docs/packages
 
 features:
-  - title: Feature A
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
-  - title: Feature B
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
-  - title: Feature C
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+  - title: 📦 Modular Architecture
+    details: Install only what you need. Each component is a separate scoped package (e.g., @vue-interface/modal).
+  - title: 🎨 Tailwind CSS v4
+    details: Built with the latest Tailwind CSS for utility-first styling and easy customization.
+  - title: 🛡️ TypeScript Ready
+    details: Written in TypeScript for excellent type safety and developer experience.
+  - title: ♿ Accessible
+    details: Components are designed with accessibility in mind, following WAI-ARIA practices.
 ---
-