diff --git a/docs/components/content/ComponentProps.vue b/docs/components/content/ComponentProps.vue
new file mode 100644
index 0000000..61ed26a
--- /dev/null
+++ b/docs/components/content/ComponentProps.vue
@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+import type { ComponentMeta } from 'vue-component-meta'
+import { camelCase, upperFirst } from 'scule'
+
+const route = useRoute()
+
+const props = defineProps({
+  slug: {
+    type: String,
+    default: null,
+  },
+})
+
+const slug = props.slug || route.params.slug[route.params.slug.length - 1]
+const componentCamelName = camelCase(slug)
+const componentName = `Ray${upperFirst(componentCamelName)}`
+
+const meta = await fetchComponentMeta(componentName)
+const metaProps: ComputedRef<ComponentMeta['props']> = computed(() => meta?.meta?.props || [])
+</script>
+
+<template>
+  <ProseTable>
+    <ProseThead>
+      <ProseTr>
+        <ProseTh>Prop</ProseTh>
+        <ProseTh>Default</ProseTh>
+        <ProseTh>Type</ProseTh>
+      </ProseTr>
+    </ProseThead>
+    <ProseTbody>
+      <ProseTr v-for="prop in metaProps" :key="prop.name">
+        <ProseTd>
+          {{ prop.name }}
+        </ProseTd>
+        <ProseTd>
+          <ProseCodeInline v-if="prop.default">
+            {{ prop.default }}
+          </ProseCodeInline>
+        </ProseTd>
+        <ProseTd>
+          <ProseCodeInline v-if="prop.type">
+            {{ prop.type }}
+          </ProseCodeInline>
+          <MDC v-if="prop.description" :value="prop.description" class="mt-1" />
+        </ProseTd>
+      </ProseTr>
+    </ProseTbody>
+  </ProseTable>
+</template>
diff --git a/docs/components/content/ComponentSlots.vue b/docs/components/content/ComponentSlots.vue
new file mode 100644
index 0000000..e8195d6
--- /dev/null
+++ b/docs/components/content/ComponentSlots.vue
@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import { camelCase, upperFirst } from 'scule'
+
+const route = useRoute()
+
+const props = defineProps({
+  slug: {
+    type: String,
+    default: null,
+  },
+})
+
+const slug = props.slug || route.params.slug[route.params.slug.length - 1]
+const componentCamelName = camelCase(slug)
+const componentName = `Ray${upperFirst(componentCamelName)}`
+
+const meta = await fetchComponentMeta(componentName)
+</script>
+
+<template>
+  <div class="flex flex-col not-prose font-mono divide-y divide-gray-100 dark:divide-gray-800">
+    <div v-for="(slot, k) in meta?.meta?.slots" :key="k" class="py-2">
+      <pre>{{ slot }}</pre>
+    </div>
+  </div>
+</template>
diff --git a/docs/content/2.components/button.md b/docs/content/2.components/button.md
index 130ba53..df42e02 100644
--- a/docs/content/2.components/button.md
+++ b/docs/content/2.components/button.md
@@ -114,7 +114,14 @@ props:
 Button
 ::
 
-## Config
+## API
+
+### Props
+
+::ComponentProps
+::
+
+### Config
 
 ::ComponentDefaults
 ::
diff --git a/docs/content/2.components/input.md b/docs/content/2.components/input.md
index cf22ed0..101d3b9 100644
--- a/docs/content/2.components/input.md
+++ b/docs/content/2.components/input.md
@@ -142,7 +142,14 @@ const modal = ref<string>("");
 </template>
 ```
 
-## Config
+## API
+
+### Props
+
+::ComponentProps
+::
+
+### Config
 
 ::ComponentDefaults
 ::
diff --git a/docs/content/2.components/kbd.md b/docs/content/2.components/kbd.md
index d9df1fc..e0be108 100644
--- a/docs/content/2.components/kbd.md
+++ b/docs/content/2.components/kbd.md
@@ -44,7 +44,14 @@ props:
 K
 ::
 
-## Config
+## API
+
+### Props
+
+::ComponentProps
+::
+
+### Config
 
 ::ComponentDefaults
 ::
diff --git a/docs/content/2.components/mark.md b/docs/content/2.components/mark.md
index b8a9b9b..d0378ab 100644
--- a/docs/content/2.components/mark.md
+++ b/docs/content/2.components/mark.md
@@ -82,7 +82,14 @@ slots:
 :RayButton{icon="tabler:message" label="messages" color="invert"}
 ::
 
-## Config
+## API
+
+### Props
+
+::ComponentProps
+::
+
+### Config
 
 ::ComponentDefaults
 ::
diff --git a/docs/content/2.components/message.md b/docs/content/2.components/message.md
index b5cff27..f51bf29 100644
--- a/docs/content/2.components/message.md
+++ b/docs/content/2.components/message.md
@@ -60,7 +60,14 @@ props:
 ---
 ::
 
-## Config
+## API
+
+### Props
+
+::ComponentProps
+::
+
+### Config
 
 ::ComponentDefaults
 ::
diff --git a/docs/content/2.components/textarea.md b/docs/content/2.components/textarea.md
index b170db2..6b26069 100644
--- a/docs/content/2.components/textarea.md
+++ b/docs/content/2.components/textarea.md
@@ -176,7 +176,14 @@ const modal = ref<string>("");
 </template>
 ```
 
-## Config
+## API
+
+### Props
+
+::ComponentProps
+::
+
+### Config
 
 ::ComponentDefaults
 ::
diff --git a/docs/content/2.components/toggle.md b/docs/content/2.components/toggle.md
index f6ab33d..ed544bc 100644
--- a/docs/content/2.components/toggle.md
+++ b/docs/content/2.components/toggle.md
@@ -63,7 +63,14 @@ props:
 ---
 ::
 
-## Config
+## API
+
+### Props
+
+::ComponentProps
+::
+
+### Config
 
 ::ComponentDefaults
 ::
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index d35efd3..bc29562 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -60,7 +60,7 @@ export default defineNuxtConfig({
       type: false,
       props: true,
       slots: true,
-      events: false,
+      events: true,
       exposed: false,
     },
   },