diff --git a/docs/content/3.components/input.md b/docs/content/3.components/input.md
index ab99aebd..75afcbcb 100644
--- a/docs/content/3.components/input.md
+++ b/docs/content/3.components/input.md
@@ -15,7 +15,7 @@ Use the `v-model` directive to control the value of the Input.
 external:
   - modelValue
 props:
-  modelValue: 'benjamincanac'
+  modelValue: ''
 ---
 ::
 
diff --git a/docs/content/3.components/textarea.md b/docs/content/3.components/textarea.md
index 42807cc6..eb62b94e 100644
--- a/docs/content/3.components/textarea.md
+++ b/docs/content/3.components/textarea.md
@@ -8,7 +8,127 @@ links:
 
 ## Usage
 
-## Examples
+Use the `v-model` directive to control the value of the Textarea.
+
+::component-code
+---
+external:
+  - modelValue
+props:
+  modelValue: ''
+---
+::
+
+### Placeholder
+
+Use the `placeholder` prop to set a placeholder text.
+
+::component-code
+---
+props:
+  placeholder: 'Type something...'
+---
+::
+
+### Color
+
+Use the `color` prop to change the ring color when the Textarea is focused.
+
+::component-code
+---
+ignore:
+  - placeholder
+props:
+  color: gray
+  highlight: true
+  placeholder: 'Type something...'
+---
+::
+
+::note
+The `highlight` prop is used here to show the focus state. It's used internally when a validation error occurs.
+::
+
+### Variant
+
+Use the `variant` prop to change the variant of the Textarea.
+
+::component-code
+---
+ignore:
+  - placeholder
+props:
+  color: gray
+  variant: subtle
+  placeholder: 'Type something...'
+---
+::
+
+### Size
+
+Use the `size` prop to change the size of the Textarea.
+
+::component-code
+---
+ignore:
+  - placeholder
+props:
+  size: xl
+  placeholder: 'Type something...'
+---
+::
+
+### Disabled
+
+Use the `disabled` prop to disable the Textarea.
+
+::component-code
+---
+ignore:
+  - placeholder
+props:
+  disabled: true
+  placeholder: 'Type something...'
+---
+::
+
+### Rows
+
+Use the `rows` prop to set the number of rows. Defaults to `3`.
+
+::component-code
+---
+props:
+  rows: 12
+---
+::
+
+### Autoresize
+
+Use the `autoresize` prop to enable autoresizing the height of the Textarea.
+
+::component-code
+---
+external:
+  - modelValue
+props:
+  modelValue: 'This is a long text that will autoresize the height of the Textarea.'
+  autoresize: true
+---
+::
+
+Use the `maxrows` prop to set the maximum number of rows when autoresizing. If set to `0`, the Textarea will grow indefinitely.
+
+::component-code
+---
+external:
+  - modelValue
+props:
+  modelValue: 'This is a long text that will autoresize the height of the Textarea with a maximum of 4 rows.'
+  maxrows: 4
+  autoresize: true
+---
+::
 
 ## API
 
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index 8e59a39f..7f45de83 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -133,6 +133,7 @@ export default defineNuxtConfig({
         'ULink',
         'UProgress',
         'UTabs',
+        'UTextarea',
         'UTooltip'
       ].includes(c.pascalName))