diff --git a/apps/docs/src/pages/components/atom.md b/apps/docs/src/pages/components/atom.md
index 8f666b17..affee7c4 100644
--- a/apps/docs/src/pages/components/atom.md
+++ b/apps/docs/src/pages/components/atom.md
@@ -1,3 +1,94 @@
-# Atom
+---
+meta:
+  title: Atom
+  description: A fundamental building block component in Vuetify0.
+  keywords: atom, vuetify0, component
+category: Component
+performance: 0
+---
 
-The Atom component is the foundational building block for all other components in Vuetify0. It provides dynamic element rendering and supports renderless capabilities.
+# Atom Component
+
+## Description
+
+The `Atom` component serves as a fundamental building block within the Vuetify0 framework. It is designed to be a highly flexible and reusable component, often used as a base for more complex UI elements. Its primary purpose is to encapsulate basic rendering logic and provide a consistent foundation for other components.
+
+## API
+
+### Props
+
+- **`as`**: `HTMLElement | null`
+  - Specifies the HTML element to render the component as. If `null`, it defaults to a `div`.
+- **`renderless`**: `boolean`
+  - If `true`, the component will not render any HTML element itself, but will still provide its functionality to its children. This is useful for creating higher-order components or renderless components.
+
+### Slots
+
+- **`default`**: `(props: T) => any`
+  - The default slot allows you to inject content into the `Atom` component. The `props` object provides access to internal properties or methods of the `Atom` component, allowing for flexible rendering based on its state.
+
+### Events
+
+There are no specific events emitted by the `Atom` component.
+
+## Examples
+
+### Basic Usage
+
+```html
+<template>
+  <Atom>
+    <div>This is a basic Atom component.</div>
+  </Atom>
+</template>
+
+<script setup lang="ts">
+  import { Atom } from '@vuetify/0/components/Atom'
+</script>
+```
+
+### Rendering as a different HTML element
+
+```html
+<template>
+  <Atom as="span">
+    <span>This Atom component renders as a span.</span>
+  </Atom>
+</template>
+
+<script setup lang="ts">
+  import { Atom } from '@vuetify/0/components/Atom'
+</script>
+```
+
+### Renderless Atom
+
+```html
+<template>
+  <Atom renderless>
+    <template #default="{ someInternalProp }">
+      <div>This content is rendered by a renderless Atom. Internal prop: {{ someInternalProp }}</div>
+    </template>
+  </Atom>
+</template>
+
+<script setup lang="ts">
+  import { Atom } from '@vuetify/0/components/Atom'
+</script>
+```
+
+### Atom with custom content via slot
+
+```html
+<template>
+  <Atom>
+    <template #default="{ message }">
+      <h1>{{ message }}</h1>
+    </template>
+  </Atom>
+</template>
+
+<script setup lang="ts">
+  import { Atom } from '@vuetify/0/components/Atom'
+</script>
+```
diff --git a/apps/docs/src/pages/components/avatar.md b/apps/docs/src/pages/components/avatar.md
index cad31c68..58c91f00 100644
--- a/apps/docs/src/pages/components/avatar.md
+++ b/apps/docs/src/pages/components/avatar.md
@@ -1 +1,91 @@
-# Avatar
+---
+meta:
+  title: Avatar
+  description: A component for displaying user avatars or other circular images.
+  keywords: avatar, vuetify0, component, user profile
+category: Component
+performance: 0
+---
+
+# Avatar Component
+
+## Description
+
+The `Avatar` component in Vuetify0 is used to display circular images, typically representing user profiles, but can also be used for other visual elements requiring a circular shape. It provides options for displaying images, fallback content, and managing loading states.
+
+## API
+
+### Props
+
+- **`type`**: `"image" | "fallback"`
+  - Specifies the type of content the avatar displays. Can be either an image or a fallback (e.g., initials or an icon).
+- **`priority`**: `number`
+  - Determines the loading priority of the avatar, useful for optimizing image loading in lists or grids.
+- **`status`**: `"idle" | "loading" | "loaded" | "error"`
+  - Indicates the current loading status of the avatar's content.
+- **`isVisible`**: `Readonly<ComputedGetter<boolean>>`
+  - A computed property indicating whether the avatar is currently visible.
+
+### Slots
+
+- **`default`**
+  - The default slot for custom content within the avatar, such as an image or text.
+
+### Events
+
+There are no specific events emitted by the `Avatar` component.
+
+## Examples
+
+### Basic Image Avatar
+
+```vue
+<template>
+  <Avatar type="image" src="https://example.com/avatar.jpg" />
+</template>
+
+<script setup lang="ts">
+import { Avatar } from '@vuetify/0/components/Avatar';
+</script>
+```
+
+### Avatar with Fallback (Initials)
+
+```vue
+<template>
+  <Avatar type="fallback">
+    <span>JD</span>
+  </Avatar>
+</template>
+
+<script setup lang="ts">
+import { Avatar } from '@vuetify/0/components/Avatar';
+</script>
+```
+
+### Avatar with Loading Status
+
+```vue
+<template>
+  <Avatar type="image" src="https://example.com/loading-avatar.jpg" status="loading" />
+</template>
+
+<script setup lang="ts">
+import { Avatar } from '@vuetify/0/components/Avatar';
+</script>
+```
+
+### Avatar with Custom Content
+
+```vue
+<template>
+  <Avatar>
+    <img src="https://example.com/custom-avatar.png" alt="Custom Avatar" />
+  </Avatar>
+</template>
+
+<script setup lang="ts">
+import { Avatar } from '@vuetify/0/components/Avatar';
+</script>
+```
+
diff --git a/apps/docs/src/pages/components/breakpoints.md b/apps/docs/src/pages/components/breakpoints.md
index 0c337a77..c87c687c 100644
--- a/apps/docs/src/pages/components/breakpoints.md
+++ b/apps/docs/src/pages/components/breakpoints.md
@@ -1 +1,98 @@
-# Breakpoints
+---
+meta:
+  title: Breakpoints
+  description: A component for managing responsive breakpoints and providing breakpoint-related information.
+  keywords: breakpoints, responsive, vuetify0, component
+category: Component
+performance: 0
+---
+
+# Breakpoints Component
+
+## Description
+
+The `Breakpoints` component in Vuetify0 provides a way to manage and react to different screen sizes and device orientations. It leverages the `useBreakpoints` composable to expose reactive properties related to the current breakpoint, allowing you to build responsive layouts and adapt your UI based on the user's device.
+
+## API
+
+### Props
+
+- **`name`**: `string`
+  - The name of the breakpoint context.
+- **`width`**: `number`
+  - The current width of the viewport.
+- **`height`**: `number`
+  - The current height of the viewport.
+- **`isMobile`**: `boolean`
+  - Indicates if the current viewport is considered a mobile device.
+- **`xs`**: `boolean`
+  - Indicates if the current viewport is within the 'extra small' breakpoint.
+- **`sm`**: `boolean`
+  - Indicates if the current viewport is within the 'small' breakpoint.
+- **`md`**: `boolean`
+  - Indicates if the current viewport is within the 'medium' breakpoint.
+- **`lg`**: `boolean`
+  - Indicates if the current viewport is within the 'large' breakpoint.
+- **`xl`**: `boolean`
+  - Indicates if the current viewport is within the 'extra large' breakpoint.
+- **`xxl`**: `boolean`
+  - Indicates if the current viewport is within the 'double extra large' breakpoint.
+
+### Slots
+
+- **`default`**: `(scope: BreakpointsContext) => any`
+  - The default slot provides access to the `BreakpointsContext` object, which contains all the reactive breakpoint properties. This allows you to conditionally render content or apply styles based on the current breakpoint.
+
+### Events
+
+There are no specific events emitted by the `Breakpoints` component.
+
+## Examples
+
+### Basic Usage with Breakpoint Information
+
+```vue
+<template>
+  <Breakpoints>
+    <template #default="{ xs, sm, md, lg, xl, xxl, width, height, isMobile }">
+      <div>
+        <p>Current Width: {{ width }}px</p>
+        <p>Current Height: {{ height }}px</p>
+        <p>Is Mobile: {{ isMobile }}</p>
+        <p v-if="xs">Extra Small Screen</p>
+        <p v-if="sm">Small Screen</p>
+        <p v-if="md">Medium Screen</p>
+        <p v-if="lg">Large Screen</p>
+        <p v-if="xl">Extra Large Screen</p>
+        <p v-if="xxl">Double Extra Large Screen</p>
+      </div>
+    </template>
+  </Breakpoints>
+</template>
+
+<script setup lang="ts">
+import { Breakpoints } from '@vuetify/0/components/Breakpoints';
+</script>
+```
+
+### Conditional Rendering based on Breakpoint
+
+```vue
+<template>
+  <Breakpoints>
+    <template #default="{ mdAndUp }">
+      <div v-if="mdAndUp">
+        This content is visible on medium screens and larger.
+      </div>
+      <div v-else>
+        This content is visible on screens smaller than medium.
+      </div>
+    </template>
+  </Breakpoints>
+</template>
+
+<script setup lang="ts">
+import { Breakpoints } from '@vuetify/0/components/Breakpoints';
+</script>
+```
+
diff --git a/apps/docs/src/pages/components/context.md b/apps/docs/src/pages/components/context.md
index c4030388..ed6ca733 100644
--- a/apps/docs/src/pages/components/context.md
+++ b/apps/docs/src/pages/components/context.md
@@ -1 +1,92 @@
-# Context
+---
+meta:
+  title: Context
+  description: A component for providing and injecting context data within a component tree.
+  keywords: context, vuetify0, component, dependency injection
+category: Component
+performance: 0
+---
+
+# Context Component
+
+## Description
+
+The `Context` component in Vuetify0 facilitates dependency injection by providing a mechanism to share data down the component tree without explicitly passing props at each level. It leverages Vue's `provide` and `inject` functionalities, wrapped in a convenient component structure, to manage and retrieve contextual data.
+
+## API
+
+### Props
+
+- **`contextKey`**: `InjectionKey<T> | string`
+  - The key used to identify the context. This can be a Vue `InjectionKey` or a string.
+- **`value`**: `T`
+  - The value to be provided as context. This value can be of any type `T`.
+
+### Slots
+
+- **`default`**: `() => any`
+  - The default slot allows you to place child components that will have access to the provided context.
+
+### Events
+
+There are no specific events emitted by the `Context` component.
+
+## Examples
+
+### Basic Context Provision and Injection
+
+```vue
+<template>
+  <Context :contextKey="myContextKey" :value="myContextValue">
+    <ChildComponent />
+  </Context>
+</template>
+
+<script setup lang="ts">
+import { provide, inject, InjectionKey, ref } from 'vue';
+import { Context } from '@vuetify/0/components/Context';
+
+interface MyContextType {
+  message: string;
+}
+
+const myContextKey: InjectionKey<MyContextType> = Symbol('my-context-key');
+const myContextValue = ref({ message: 'Hello from Context!' });
+
+const ChildComponent = {
+  setup() {
+    const context = inject(myContextKey);
+    return {
+      context,
+    };
+  },
+  template: `<div>{{ context?.message }}</div>`,
+};
+</script>
+```
+
+### Using String as Context Key
+
+```vue
+<template>
+  <Context contextKey="myStringContext" value="This is a string context.">
+    <AnotherChildComponent />
+  </Context>
+</template>
+
+<script setup lang="ts">
+import { inject } from 'vue';
+import { Context } from '@vuetify/0/components/Context';
+
+const AnotherChildComponent = {
+  setup() {
+    const context = inject('myStringContext');
+    return {
+      context,
+    };
+  },
+  template: `<div>{{ context }}</div>`,
+};
+</script>
+```
+
diff --git a/apps/docs/src/pages/components/group.md b/apps/docs/src/pages/components/group.md
new file mode 100644
index 00000000..64cf9e76
--- /dev/null
+++ b/apps/docs/src/pages/components/group.md
@@ -0,0 +1,104 @@
+---
+meta:
+  title: Group
+  description: A component for managing a collection of selectable items, such as radio buttons or checkboxes.
+  keywords: group, vuetify0, component, selection, radio, checkbox
+category: Component
+performance: 0
+---
+
+# Group Component
+
+## Description
+
+The `Group` component in Vuetify0 is designed to manage the selection state of a collection of child items. It provides a flexible way to implement various selection behaviors, such as single selection (like radio buttons) or multiple selection (like checkboxes), by leveraging the `useGroup` composable.
+
+## API
+
+### Props
+
+- **`namespace`**: `string`
+  - A unique identifier for the group, used for context and state management.
+- **`modelValue`**: `any`
+  - The current value of the selected item(s) in the group. This prop is used with `v-model` for two-way data binding.
+- **`multiple`**: `boolean`
+  - If `true`, allows multiple items to be selected within the group. Defaults to `false` (single selection).
+- **`mandatory`**: `boolean`
+  - If `true`, at least one item must always be selected. Cannot be `true` if `multiple` is `true`.
+- **`max`**: `number`
+  - The maximum number of items that can be selected when `multiple` is `true`.
+
+### Slots
+
+- **`default`**: `(scope: GroupContext) => any`
+  - The default slot provides access to the `GroupContext` object, which contains properties and methods related to the group's selection state. This allows for dynamic rendering and interaction with group items.
+
+### Events
+
+- **`update:modelValue`**: `(value: any) => void`
+  - Emitted when the selected value(s) of the group change.
+
+## Examples
+
+### Single Selection Group (Radio-like)
+
+```vue
+<template>
+  <Group v-model="selectedOption">
+    <GroupItem value="option1">Option 1</GroupItem>
+    <GroupItem value="option2">Option 2</GroupItem>
+    <GroupItem value="option3">Option 3</GroupItem>
+  </Group>
+  <p>Selected: {{ selectedOption }}</p>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Group, GroupItem } from '@vuetify/0/components/Group';
+
+const selectedOption = ref("option1");
+</script>
+```
+
+### Multiple Selection Group (Checkbox-like)
+
+```vue
+<template>
+  <Group v-model="selectedItems" multiple :max="2">
+    <GroupItem value="itemA">Item A</GroupItem>
+    <GroupItem value="itemB">Item B</GroupItem>
+    <GroupItem value="itemC">Item C</GroupItem>
+  </Group>
+  <p>Selected: {{ selectedItems }}</p>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Group, GroupItem } from '@vuetify/0/components/Group';
+
+const selectedItems = ref(["itemA"]);
+</script>
+```
+
+### Group with Custom Content in GroupItem
+
+```vue
+<template>
+  <Group v-model="selectedColor">
+    <GroupItem value="red">
+      <div style="background-color: red; width: 50px; height: 50px;"></div>
+    </GroupItem>
+    <GroupItem value="blue">
+      <div style="background-color: blue; width: 50px; height: 50px;"></div>
+    </GroupItem>
+  </Group>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Group, GroupItem } from '@vuetify/0/components/Group';
+
+const selectedColor = ref("red");
+</script>
+```
+
diff --git a/apps/docs/src/pages/components/hydration.md b/apps/docs/src/pages/components/hydration.md
index 14f01399..4cff0fde 100644
--- a/apps/docs/src/pages/components/hydration.md
+++ b/apps/docs/src/pages/components/hydration.md
@@ -1 +1,77 @@
-# Hydration
+---
+meta:
+  title: Hydration
+  description: A component for managing the hydration state of a Vue application, ensuring proper server-side rendering and client-side re-engagement.
+  keywords: hydration, vuetify0, component, server-side rendering, SSR
+category: Component
+performance: 0
+---
+
+# Hydration Component
+
+## Description
+
+The `Hydration` component in Vuetify0 is crucial for applications utilizing Server-Side Rendering (SSR). It provides a mechanism to manage the hydration process, which involves re-using the server-rendered HTML on the client-side and attaching interactivity. This ensures a smooth transition from a static server-rendered page to a fully interactive Vue application.
+
+## API
+
+### Props
+
+There are no specific props for the `Hydration` component itself, as its primary function is to provide context for hydration.
+
+### Slots
+
+- **`default`**: `(scope: HydrationContext) => any`
+  - The default slot provides access to the `HydrationContext` object. This context can contain information or utilities related to the hydration process, allowing child components to react to or participate in hydration.
+
+### Events
+
+There are no specific events emitted by the `Hydration` component.
+
+## Examples
+
+### Basic Hydration Usage
+
+```vue
+<template>
+  <Hydration>
+    <template #default="{ isHydrated }">
+      <div v-if="isHydrated">
+        This content is hydrated and interactive.
+      </div>
+      <div v-else>
+        This content is server-rendered and awaiting hydration.
+      </div>
+    </template>
+  </Hydration>
+</template>
+
+<script setup lang="ts">
+import { Hydration } from '@vuetify/0/components/Hydration';
+</script>
+```
+
+### Hydration with Nested Components
+
+```vue
+<template>
+  <Hydration>
+    <MyInteractiveComponent />
+  </Hydration>
+</template>
+
+<script setup lang="ts">
+import { Hydration } from '@vuetify/0/components/Hydration';
+import { inject } from 'vue';
+
+const MyInteractiveComponent = {
+  setup() {
+    const hydrationContext = inject('hydrationContext'); // Assuming 'hydrationContext' is the key provided by Hydration
+    // Use hydrationContext to determine if component is hydrated
+    return {};
+  },
+  template: `<div>Interactive content inside Hydration.</div>`,
+};
+</script>
+```
+
diff --git a/apps/docs/src/pages/components/components.md b/apps/docs/src/pages/components/index.md
similarity index 100%
rename from apps/docs/src/pages/components/components.md
rename to apps/docs/src/pages/components/index.md
index f82113ad..efba838e 100644
--- a/apps/docs/src/pages/components/components.md
+++ b/apps/docs/src/pages/components/index.md
@@ -8,13 +8,13 @@ A collection of foundational components designed to be headless, accessible, and
 | - | - |
 | Atom | Base element wrapper with dynamic element types |
 | Avatar | Image/fallback avatar system with priority loading |
+| Breakpoints | Responsive breakpoint utilities |
 | Context | Context injection/provision for sharing state |
 | Group | Selection grouping with multiple/single modes |
 | Hydration | Client-side hydration utilities for SSR |
 | Popover | CSS anchor-positioned popup components |
 | Step | Step-based navigation for wizards and forms |
 | Theme | Theme management and CSS variable injection |
-| Breakpoints | Responsive breakpoint utilities |
 
 - **Headless First**: Provide logic and accessibility without imposed styling
 - **Slot-Driven**: Maximum flexibility through comprehensive slot APIs
@@ -72,6 +72,47 @@ import { Avatar } from '@vuetify/v0'
 </template>
 ```
 
+## Breakpoints
+
+Responsive utilities for adaptive layouts.
+
+```html
+<script setup>
+import { Breakpoints } from '@vuetify/v0'
+</script>
+
+<template>
+  <Breakpoints.Root>
+    <Breakpoints.Item #default="{ mobile, tablet, desktop }">
+      <div v-if="mobile">Mobile Layout</div>
+      <div v-else-if="tablet">Tablet Layout</div>
+      <div v-else>Desktop Layout</div>
+    </Breakpoints.Item>
+  </Breakpoints.Root>
+</template>
+```
+
+## Context
+
+Provide and inject context for sharing state across component trees.
+
+```html
+<script setup>
+import { Context } from '@vuetify/v0'
+
+const contextValue = { user: 'John', theme: 'dark' }
+</script>
+
+<template>
+  <Context.Root :value="contextValue" context-key="app-context">
+    <Context.Item context-key="app-context" #default="{ value }">
+      <p>User: {{ value.user }}</p>
+      <p>Theme: {{ value.theme }}</p>
+    </Context.Item>
+  </Context.Root>
+</template>
+```
+
 ## Group
 
 Selection management for collections of items with single/multiple selection modes.
@@ -101,28 +142,24 @@ const selected = ref([])
 </template>
 ```
 
-## Step
+## Hydration
 
-Step-based navigation for wizards and multi-step processes.
+SSR hydration management.
 
 ```html
 <script setup>
-import { Step } from '@vuetify/v0'
-import { ref } from 'vue'
-
-const currentStep = ref('step1')
+import { Hydration } from '@vuetify/v0'
 </script>
 
 <template>
-  <Step.Root v-model="currentStep" namespace="wizard">
-    <Step.Item value="step1" #default="{ isActive }">
-      <div :class="{ active: isActive }">Step 1 Content</div>
-    </Step.Item>
-
-    <Step.Item value="step2" #default="{ isActive }">
-      <div :class="{ active: isActive }">Step 2 Content</div>
-    </Step.Item>
-  </Step.Root>
+  <Hydration #default="{ isHydrated }">
+    <div v-if="isHydrated">
+      Client-side content
+    </div>
+    <div v-else>
+      Server-side content
+    </div>
+  </Hydration>
 </template>
 ```
 
@@ -150,44 +187,28 @@ import { Popover } from '@vuetify/v0'
 </template>
 ```
 
-## Context
+## Step
 
-Provide and inject context for sharing state across component trees.
+Step-based navigation for wizards and multi-step processes.
 
 ```html
 <script setup>
-import { Context } from '@vuetify/v0'
+import { Step } from '@vuetify/v0'
+import { ref } from 'vue'
 
-const contextValue = { user: 'John', theme: 'dark' }
+const currentStep = ref('step1')
 </script>
 
 <template>
-  <Context.Root :value="contextValue" context-key="app-context">
-    <Context.Item context-key="app-context" #default="{ value }">
-      <p>User: {{ value.user }}</p>
-      <p>Theme: {{ value.theme }}</p>
-    </Context.Item>
-  </Context.Root>
-</template>
-```
-
-## Breakpoints
-
-Responsive utilities for adaptive layouts.
-
-```html
-<script setup>
-import { Breakpoints } from '@vuetify/v0'
-</script>
+  <Step.Root v-model="currentStep" namespace="wizard">
+    <Step.Item value="step1" #default="{ isActive }">
+      <div :class="{ active: isActive }">Step 1 Content</div>
+    </Step.Item>
 
-<template>
-  <Breakpoints.Root>
-    <Breakpoints.Item #default="{ mobile, tablet, desktop }">
-      <div v-if="mobile">Mobile Layout</div>
-      <div v-else-if="tablet">Tablet Layout</div>
-      <div v-else>Desktop Layout</div>
-    </Breakpoints.Item>
-  </Breakpoints.Root>
+    <Step.Item value="step2" #default="{ isActive }">
+      <div :class="{ active: isActive }">Step 2 Content</div>
+    </Step.Item>
+  </Step.Root>
 </template>
 ```
 
@@ -211,27 +232,6 @@ import { Theme } from '@vuetify/v0'
 </template>
 ```
 
-## Hydration
-
-SSR hydration management.
-
-```html
-<script setup>
-import { Hydration } from '@vuetify/v0'
-</script>
-
-<template>
-  <Hydration #default="{ isHydrated }">
-    <div v-if="isHydrated">
-      Client-side content
-    </div>
-    <div v-else>
-      Server-side content
-    </div>
-  </Hydration>
-</template>
-```
-
 ## Component Integration
 
 Components can be composed together for complex functionality:
diff --git a/apps/docs/src/pages/components/popover.md b/apps/docs/src/pages/components/popover.md
index 2b48ee58..8c4df53f 100644
--- a/apps/docs/src/pages/components/popover.md
+++ b/apps/docs/src/pages/components/popover.md
@@ -1 +1,81 @@
-# Popover
+---
+meta:
+  title: Popover
+  description: A component for displaying contextual overlays, such as tooltips, dropdowns, or menus.
+  keywords: popover, vuetify0, component, tooltip, dropdown, menu
+category: Component
+performance: 0
+---
+
+# Popover Component
+
+## Description
+
+The `Popover` component in Vuetify0 provides a flexible and accessible way to display contextual overlays. It can be used for various purposes, including tooltips, dropdown menus, and more complex interactive elements that appear on top of other content. The `Popover` component consists of an `Anchor` (the element that triggers the popover) and `Content` (the actual popover display).
+
+## API
+
+### Props
+
+- **`id`**: `string`
+  - A unique identifier for the popover, used for accessibility and internal state management.
+- **`isActive`**: `ShallowRef<boolean>`
+  - A reactive property indicating whether the popover is currently open or closed.
+
+### Slots
+
+- **`default`**
+  - The default slot for the `PopoverRoot` component, which typically contains the `PopoverAnchor` and `PopoverContent` components.
+
+### Events
+
+- **`toggle`**: `() => void`
+  - A function provided by the `PopoverContext` to programmatically open or close the popover.
+
+## Examples
+
+### Basic Popover with Click Trigger
+
+```vue
+<template>
+  <Popover>
+    <PopoverAnchor>
+      <button>Click Me</button>
+    </PopoverAnchor>
+    <PopoverContent>
+      <div>This is the popover content!</div>
+    </PopoverContent>
+  </Popover>
+</template>
+
+<script setup lang="ts">
+import { Popover, PopoverAnchor, PopoverContent } from '@vuetify/0/components/Popover';
+</script>
+```
+
+### Popover with Custom Content and Toggle Functionality
+
+```vue
+<template>
+  <Popover>
+    <PopoverAnchor>
+      <button @click="toggle">Toggle Popover</button>
+    </PopoverAnchor>
+    <PopoverContent>
+      <div>
+        <h2>My Custom Popover</h2>
+        <p>This popover can be controlled programmatically.</p>
+        <button @click="toggle">Close</button>
+      </div>
+    </PopoverContent>
+  </Popover>
+</template>
+
+<script setup lang="ts">
+import { Popover, PopoverAnchor, PopoverContent } from '@vuetify/0/components/Popover';
+import { usePopoverContext } from '@vuetify/0/composables/usePopover'; // Assuming this composable exists
+
+const { toggle } = usePopoverContext();
+</script>
+```
+
diff --git a/apps/docs/src/pages/components/step.md b/apps/docs/src/pages/components/step.md
index b9da61a9..c89c5a26 100644
--- a/apps/docs/src/pages/components/step.md
+++ b/apps/docs/src/pages/components/step.md
@@ -1 +1,104 @@
-# Step
+---
+meta:
+  title: Step
+  description: A component for creating multi-step flows or wizards, guiding users through a defined sequence of actions.
+  keywords: step, vuetify0, component, wizard, multi-step, form
+category: Component
+performance: 0
+---
+
+# Step Component
+
+## Description
+
+The `Step` component in Vuetify0 is designed to facilitate the creation of multi-step processes, such as forms, onboarding flows, or wizards. It provides a structured way to define individual steps and manage the progression between them. The `Step` component works in conjunction with `StepItem` components to define the content of each step.
+
+## API
+
+### Props
+
+- **`namespace`**: `string`
+  - A unique identifier for the step context, used for internal state management.
+- **`modelValue`**: `any`
+  - The current active step. This prop is used with `v-model` for two-way data binding.
+- **`mandatory`**: `boolean`
+  - If `true`, a step must always be active.
+- **`max`**: `number`
+  - The maximum number of steps allowed.
+
+### Slots
+
+- **`default`**: `(scope: StepContext) => any`
+  - The default slot provides access to the `StepContext` object, which contains properties and methods related to the step progression. This allows for dynamic rendering and control over the step flow.
+
+### Events
+
+- **`update:modelValue`**: `(value: any) => void`
+  - Emitted when the active step changes.
+
+## Examples
+
+### Basic Multi-Step Form
+
+```vue
+<template>
+  <Step v-model="currentStep">
+    <StepItem value="step1">
+      <h2>Step 1: Personal Information</h2>
+      <input type="text" placeholder="Name" />
+      <button @click="currentStep = 'step2'">Next</button>
+    </StepItem>
+    <StepItem value="step2">
+      <h2>Step 2: Contact Details</h2>
+      <input type="email" placeholder="Email" />
+      <button @click="currentStep = 'step1'">Previous</button>
+      <button @click="currentStep = 'step3'">Next</button>
+    </StepItem>
+    <StepItem value="step3">
+      <h2>Step 3: Confirmation</h2>
+      <p>Please review your information.</p>
+      <button @click="currentStep = 'step2'">Previous</button>
+      <button>Submit</button>
+    </StepItem>
+  </Step>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Step, StepItem } from '@vuetify/0/components/Step';
+
+const currentStep = ref('step1');
+</script>
+```
+
+### Step with Custom Navigation
+
+```vue
+<template>
+  <Step v-model="currentStep">
+    <template #default="{ next, prev }">
+      <StepItem value="intro">
+        <h1>Welcome!</h1>
+        <button @click="next">Start</button>
+      </StepItem>
+      <StepItem value="main">
+        <p>Main content here.</p>
+        <button @click="prev">Back</button>
+        <button @click="next">Continue</button>
+      </StepItem>
+      <StepItem value="finish">
+        <h2>All Done!</h2>
+        <button @click="prev">Go Back</button>
+      </StepItem>
+    </template>
+  </Step>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Step, StepItem } from '@vuetify/0/components/Step';
+
+const currentStep = ref('intro');
+</script>
+```
+
diff --git a/apps/docs/src/pages/components/theme.md b/apps/docs/src/pages/components/theme.md
index dbe49015..36de4fd9 100644
--- a/apps/docs/src/pages/components/theme.md
+++ b/apps/docs/src/pages/components/theme.md
@@ -1 +1,104 @@
-# Theme
+---
+meta:
+  title: Theme
+  description: A component for managing and applying themes across your Vuetify0 application.
+  keywords: theme, vuetify0, component, styling, dark mode, light mode
+category: Component
+performance: 0
+---
+
+# Theme Component
+
+## Description
+
+The `Theme` component in Vuetify0 provides a centralized way to manage and apply themes throughout your application. It allows you to define different theme configurations (e.g., light, dark) and dynamically switch between them, affecting the visual appearance of your components. This component works in conjunction with the `useTheme` composable to provide theme-related functionalities to child components.
+
+## API
+
+### Props
+
+- **`namespace`**: `string`
+  - A unique identifier for the theme context, used for internal state management.
+- **`themes`**: `ThemeItem[]`
+  - An array of theme configurations. Each `ThemeItem` defines a specific theme, including its name and associated styles or variables.
+
+### Slots
+
+- **`default`**: `(scope: ThemeContext) => any`
+  - The default slot provides access to the `ThemeContext` object, which contains properties and methods related to the current theme. This allows child components to react to theme changes and apply appropriate styles.
+
+### Events
+
+There are no specific events emitted by the `Theme` component.
+
+## Examples
+
+### Basic Theme Switching
+
+```vue
+<template>
+  <Theme namespace="my-app-theme">
+    <template #default="{ currentTheme, toggleTheme }">
+      <button @click="toggleTheme">Toggle Theme ({{ currentTheme }})</button>
+      <div :class="currentTheme">
+        This content will change its appearance based on the theme.
+      </div>
+    </template>
+  </Theme>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Theme } from '@vuetify/0/components/Theme';
+
+// In a real application, you would define your themes more comprehensively
+// For simplicity, we'll just use a class name here.
+const currentTheme = ref('light-theme');
+
+const toggleTheme = () => {
+  currentTheme.value = currentTheme.value === 'light-theme' ? 'dark-theme' : 'light-theme';
+};
+</script>
+
+<style>
+.light-theme {
+  background-color: #ffffff;
+  color: #000000;
+}
+.dark-theme {
+  background-color: #333333;
+  color: #ffffff;
+}
+</style>
+```
+
+### Accessing Theme Context in Child Component
+
+```vue
+<template>
+  <Theme namespace="my-app-theme">
+    <MyThemedComponent />
+  </Theme>
+</template>
+
+<script setup lang="ts">
+import { Theme } from '@vuetify/0/components/Theme';
+import { inject } from 'vue';
+
+const MyThemedComponent = {
+  setup() {
+    const themeContext = inject('themeContext'); // Assuming 'themeContext' is the key provided by Theme
+    // Use themeContext to apply styles or logic based on the current theme
+    return {
+      themeContext,
+    };
+  },
+  template: `
+    <div :class="themeContext?.currentTheme">
+      This component is aware of the current theme.
+    </div>
+  `,
+};
+</script>
+```
+
diff --git a/apps/docs/src/typed-router.d.ts b/apps/docs/src/typed-router.d.ts
index 5b3a8d96..823a9ed1 100644
--- a/apps/docs/src/typed-router.d.ts
+++ b/apps/docs/src/typed-router.d.ts
@@ -19,11 +19,12 @@ declare module 'vue-router/auto-routes' {
    */
   export interface RouteNamedMap {
     '/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>,
+    '/components/': RouteRecordInfo<'/components/', '/components', Record<never, never>, Record<never, never>>,
     '/components/atom': RouteRecordInfo<'/components/atom', '/components/atom', Record<never, never>, Record<never, never>>,
     '/components/avatar': RouteRecordInfo<'/components/avatar', '/components/avatar', Record<never, never>, Record<never, never>>,
     '/components/breakpoints': RouteRecordInfo<'/components/breakpoints', '/components/breakpoints', Record<never, never>, Record<never, never>>,
-    '/components/components': RouteRecordInfo<'/components/components', '/components/components', Record<never, never>, Record<never, never>>,
     '/components/context': RouteRecordInfo<'/components/context', '/components/context', Record<never, never>, Record<never, never>>,
+    '/components/group': RouteRecordInfo<'/components/group', '/components/group', Record<never, never>, Record<never, never>>,
     '/components/hydration': RouteRecordInfo<'/components/hydration', '/components/hydration', Record<never, never>, Record<never, never>>,
     '/components/popover': RouteRecordInfo<'/components/popover', '/components/popover', Record<never, never>, Record<never, never>>,
     '/components/step': RouteRecordInfo<'/components/step', '/components/step', Record<never, never>, Record<never, never>>,