diff --git a/dsp/data/components.json b/dsp/data/components.json
index 80028138..e4774bab 100644
--- a/dsp/data/components.json
+++ b/dsp/data/components.json
@@ -12055,6 +12055,644 @@
           }
         }
       }
+    },
+    {
+      "class": "component",
+      "type": "page",
+      "id": "Textarea",
+      "name": "Textarea",
+      "last_updated_by": "System",
+      "description": "Textarea is a styled HTML Textarea.\n\nThere are no behavior changes applied to the native HTML tag other\nthan light styling done via CSS in order to keep inputs accessible.",
+      "related_entity_ids": [],
+      "tags": [
+        "component"
+      ],
+      "snippets": {
+        "trigger": "textarea",
+        "languages": {
+          "javascriptreact": "<Textarea placeholder=\"Textarea\" color=\"white\"/>;\n",
+          "html": "<textarea\n  placeholder=\"Textarea\"\n  class=\"drac-textarea drac-textarea-white drac-text-white\"\n></textarea>\n"
+        }
+      },
+      "ext_com_draculaui_variations": [
+        {
+          "title": "Usage",
+          "html": "<textarea\n  placeholder=\"Textarea\"\n  class=\"drac-textarea drac-textarea-white drac-text-white\"\n></textarea>\n",
+          "react": "<Textarea placeholder=\"Textarea\" color=\"white\"/>;\n",
+          "docs": "Styles or abstracts HTML textarea elements.",
+          "screenshot": "./dsp/assets/Textarea.png"
+        },
+        {
+          "title": "Colors",
+          "html": "<div class=\"drac-box\">\n  <textarea\n    placeholder=\"purple\"\n    class=\"drac-textarea drac-textarea-purple drac-text-purple drac-m-xs\"\n  /><textarea\n    placeholder=\"green\"\n    class=\"drac-textarea drac-textarea-green drac-text-green drac-m-xs\"\n></textarea>\n</div>\n",
+          "react": "<Box>\n  <Textarea color=\"purple\" placeholder=\"purple\" m=\"xs\" />\n  <Textarea color=\"green\" placeholder=\"green\" m=\"xs\" />\n</Box>;\n",
+          "docs": "Textareas can be customized to use any of the Dracula UI theme colors.",
+          "screenshot": "./dsp/assets/InputColors.png"
+        },
+        {
+          "title": "Sizes",
+          "html": "<div class=\"drac-box\">\n  <textarea\n    placeholder=\"small\"\n    class=\"drac-textarea drac-input-sm drac-textarea-white drac-text-white drac-m-xs\"\n></textarea><textarea\n    placeholder=\"medium\"\n    class=\"drac-textarea drac-textarea-white drac-text-white drac-m-xs\"\n></textarea><textarea\n    placeholder=\"large\"\n    class=\"drac-textarea drac-textarea-lg drac-textarea-white drac-text-white drac-m-xs\"\n></textarea>\n</div>\n",
+          "react": "<Box>\n  <Textarea color=\"white\" size=\"sm\" placeholder=\"small\" m=\"xs\" />\n  <Textarea color=\"white\" size=\"md\" placeholder=\"medium\" m=\"xs\" />\n  <Textarea color=\"white\" size=\"lg\" placeholder=\"large\" m=\"xs\" />\n</Box>;\n",
+          "docs": "Textareas can be customize to use several different sizes.",
+          "screenshot": "./dsp/assets/TextareaSizes.png"
+        },
+        {
+          "title": "Variants",
+          "html": "<div class=\"drac-box\">\n  <textarea\n    placeholder=\"normal\"\n    class=\"drac-textarea drac-textarea-white drac-text-white drac-m-xs\"\n></textarea><textarea\n    placeholder=\"outline\"\n    class=\"drac-textarea drac-textarea-outline drac-textarea-white drac-text-white drac-m-xs\"\n></textarea>\n</div>\n",
+          "react": "<Box>\n  <Textarea color=\"white\" variant=\"normal\" placeholder=\"normal\" m=\"xs\" />\n  <Textarea color=\"white\" variant=\"outline\" placeholder=\"outline\" m=\"xs\" />\n</Box>;\n",
+          "docs": "Use the `outline` variant to represent subtler Textareas",
+          "screenshot": "./dsp/assets/TextareaVariants.png"
+        },
+        {
+          "title": "Border Sizes",
+          "html": "<div class=\"drac-box\">\n  <div class=\"drac-box drac-mb-sm\">\n    <h2 class=\"drac-heading drac-heading-sm drac-text-white\">sm</h2>\n    <textarea\n      placeholder=\"small border outline\"\n      class=\"drac-textarea drac-textarea-border-sm drac-textarea-green drac-text-green drac-m-xs\"\n></textarea><textarea\n      placeholder=\"small border outline\"\n      class=\"drac-textarea drac-textarea-outline drac-textarea-border-sm drac-input-green drac-text-green drac-m-xs\"\n></textarea>\n  </div>\n  <div class=\"drac-box drac-mb-sm\">\n    <h2 class=\"drac-heading drac-heading-sm drac-text-white\">md</h2>\n    <textarea\n      placeholder=\"medium border outline\"\n      class=\"drac-textarea drac-textarea-border-md drac-textarea-purple drac-text-purple drac-m-xs\"\n></textarea><textarea\n      placeholder=\"medium border outline\"\n      class=\"drac-textarea drac-textarea-outline drac-textarea-border-md drac-textarea-purple drac-text-purple drac-m-xs\"\n></textarea>\n  </div>\n  <div class=\"drac-box drac-mb-sm\">\n    <h2 class=\"drac-heading drac-heading-sm drac-text-white\">lg</h2>\n    <textarea\n      placeholder=\"large border outline\"\n      class=\"drac-textarea drac-textarea-border-lg drac-textarea-yellow drac-text-yellow drac-m-xs\"\n></textarea><textarea\n      placeholder=\"large border outline\"\n      class=\"drac-input drac-textarea-outline drac-textarea-border-lg drac-textarea-yellow drac-text-yellow drac-m-xs\"\n></textarea>\n  </div>\n</div>\n",
+          "react": "<Box>\n  <Box mb=\"sm\">\n    <Heading size=\"sm\">sm</Heading>\n    <Textarea\n      color=\"green\"\n      variant=\"normal\"\n      borderSize=\"sm\"\n      placeholder=\"small border outline\"\n      m=\"xs\"\n    />\n    <Textarea\n      color=\"green\"\n      variant=\"outline\"\n      borderSize=\"sm\"\n      placeholder=\"small border outline\"\n      m=\"xs\"\n    />\n  </Box>\n  <Box mb=\"sm\">\n    <Heading size=\"sm\">md</Heading>\n    <Input\n      color=\"purple\"\n      variant=\"normal\"\n      borderSize=\"md\"\n      placeholder=\"medium border outline\"\n      m=\"xs\"\n    />\n    <Textarea\n      color=\"purple\"\n      variant=\"outline\"\n      borderSize=\"md\"\n      placeholder=\"medium border outline\"\n      m=\"xs\"\n    />\n  </Box>\n  <Box mb=\"sm\">\n    <Heading size=\"sm\">lg</Heading>\n    <Input\n      color=\"yellow\"\n      variant=\"normal\"\n      borderSize=\"lg\"\n      placeholder=\"large border outline\"\n      m=\"xs\"\n    />\n    <Textarea\n      color=\"yellow\"\n      variant=\"outline\"\n      borderSize=\"lg\"\n      placeholder=\"large border outline\"\n      m=\"xs\"\n    />\n  </Box>\n</Box>;\n",
+          "docs": "Border size can be customize to use several different sizes.",
+          "screenshot": "./dsp/assets/TextareaBorder Sizes.png"
+        }
+      ],
+      "ext_com_draculaui_props": {
+        "color": {
+          "defaultValue": null,
+          "description": "The Dracula UI theme color to be used",
+          "name": "color",
+          "parent": {
+            "fileName": "src/components/Textarea/Textarea.tsx",
+            "name": "TextareaProps"
+          },
+          "declarations": [
+            {
+              "fileName": "src/components/Textarea/Textarea.tsx",
+              "name": "TextareaProps"
+            }
+          ],
+          "required": false,
+          "type": {
+            "name": "\"cyan\" | \"green\" | \"orange\" | \"pink\" | \"purple\" | \"red\" | \"yellow\" | \"white\" | undefined"
+          }
+        },
+        "size": {
+          "defaultValue": null,
+          "description": "Controls the size of the textarea based on pre-configured Dracula UI sizes.",
+          "name": "size",
+          "parent": {
+            "fileName": "src/components/Textarea/Textarea.tsx",
+            "name": "TextareaProps"
+          },
+          "declarations": [
+            {
+              "fileName": "src/components/Textarea/Textarea.tsx",
+              "name": "TextareaProps"
+            }
+          ],
+          "required": false,
+          "type": {
+            "name": "number | \"lg\" | \"md\" | \"sm\" | undefined"
+          }
+        },
+        "borderSize": {
+          "defaultValue": null,
+          "description": "Controls the border size of the textarea based on pre-configured Dracula UI sizes.",
+          "name": "borderSize",
+          "parent": {
+            "fileName": "src/components/Textarea/Textarea.tsx",
+            "name": "TextareaProps"
+          },
+          "declarations": [
+            {
+              "fileName": "src/components/Textarea/Textarea.tsx",
+              "name": "TextareaProps"
+            }
+          ],
+          "required": false,
+          "type": {
+            "name": "\"lg\" | \"md\" | \"sm\" | undefined"
+          }
+        },
+        "variant": {
+          "defaultValue": null,
+          "description": "Controls the variation the textarea.\n`normal` -> Regular Textarea component with a light background color.\n`outline` -> Keeps the accent color, but removes the background.",
+          "name": "variant",
+          "parent": {
+            "fileName": "src/components/Textarea/Textarea.tsx",
+            "name": "TextareaProps"
+          },
+          "declarations": [
+            {
+              "fileName": "src/components/Textarea/Textarea.tsx",
+              "name": "TextareaProps"
+            }
+          ],
+          "required": false,
+          "type": {
+            "name": "\"normal\" | \"outline\" | undefined"
+          }
+        },
+        "p": {
+          "defaultValue": null,
+          "description": "",
+          "name": "p",
+          "declarations": [
+            {
+              "fileName": "dracula-ui/src/base/spacing.ts",
+              "name": "TypeLiteral"
+            }
+          ],
+          "required": false,
+          "type": {
+            "name": "\"lg\" | \"md\" | \"sm\" | \"none\" | \"xxs\" | \"xs\" | undefined"
+          }
+        },
+        "py": {
+          "defaultValue": null,
+          "description": "",
+          "name": "py",
+          "declarations": [
+            {
+              "fileName": "dracula-ui/src/base/spacing.ts",
+              "name": "TypeLiteral"
+            }
+          ],
+          "required": false,
+          "type": {
+            "name": "\"lg\" | \"md\" | \"sm\" | \"none\" | \"xxs\" | \"xs\" | undefined"
+          }
+        },
+        "px": {
+          "defaultValue": null,
+          "description": "",
+          "name": "px",
+          "declarations": [
+            {
+              "fileName": "dracula-ui/src/base/spacing.ts",
+              "name": "TypeLiteral"
+            }
+          ],
+          "required": false,
+          "type": {
+            "name": "\"lg\" | \"md\" | \"sm\" | \"none\" | \"xxs\" | \"xs\" | undefined"
+          }
+        },
+        "pt": {
+          "defaultValue": null,
+          "description": "",
+          "name": "pt",
+          "declarations": [
+            {
+              "fileName": "dracula-ui/src/base/spacing.ts",
+              "name": "TypeLiteral"
+            }
+          ],
+          "required": false,
+          "type": {
+            "name": "\"lg\" | \"md\" | \"sm\" | \"none\" | \"xxs\" | \"xs\" | undefined"
+          }
+        },
+        "pb": {
+          "defaultValue": null,
+          "description": "",
+          "name": "pb",
+          "declarations": [
+            {
+              "fileName": "dracula-ui/src/base/spacing.ts",
+              "name": "TypeLiteral"
+            }
+          ],
+          "required": false,
+          "type": {
+            "name": "\"lg\" | \"md\" | \"sm\" | \"none\" | \"xxs\" | \"xs\" | undefined"
+          }
+        },
+        "pl": {
+          "defaultValue": null,
+          "description": "",
+          "name": "pl",
+          "declarations": [
+            {
+              "fileName": "dracula-ui/src/base/spacing.ts",
+              "name": "TypeLiteral"
+            }
+          ],
+          "required": false,
+          "type": {
+            "name": "\"lg\" | \"md\" | \"sm\" | \"none\" | \"xxs\" | \"xs\" | undefined"
+          }
+        },
+        "pr": {
+          "defaultValue": null,
+          "description": "",
+          "name": "pr",
+          "declarations": [
+            {
+              "fileName": "dracula-ui/src/base/spacing.ts",
+              "name": "TypeLiteral"
+            }
+          ],
+          "required": false,
+          "type": {
+            "name": "\"lg\" | \"md\" | \"sm\" | \"none\" | \"xxs\" | \"xs\" | undefined"
+          }
+        },
+        "m": {
+          "defaultValue": null,
+          "description": "",
+          "name": "m",
+          "declarations": [
+            {
+              "fileName": "dracula-ui/src/base/spacing.ts",
+              "name": "TypeLiteral"
+            }
+          ],
+          "required": false,
+          "type": {
+            "name": "\"lg\" | \"md\" | \"sm\" | \"none\" | \"xxs\" | \"xs\" | \"auto\" | undefined"
+          }
+        },
+        "my": {
+          "defaultValue": null,
+          "description": "",
+          "name": "my",
+          "declarations": [
+            {
+              "fileName": "dracula-ui/src/base/spacing.ts",
+              "name": "TypeLiteral"
+            }
+          ],
+          "required": false,
+          "type": {
+            "name": "\"lg\" | \"md\" | \"sm\" | \"none\" | \"xxs\" | \"xs\" | \"auto\" | undefined"
+          }
+        },
+        "mx": {
+          "defaultValue": null,
+          "description": "",
+          "name": "mx",
+          "declarations": [
+            {
+              "fileName": "dracula-ui/src/base/spacing.ts",
+              "name": "TypeLiteral"
+            }
+          ],
+          "required": false,
+          "type": {
+            "name": "\"lg\" | \"md\" | \"sm\" | \"none\" | \"xxs\" | \"xs\" | \"auto\" | undefined"
+          }
+        },
+        "mt": {
+          "defaultValue": null,
+          "description": "",
+          "name": "mt",
+          "declarations": [
+            {
+              "fileName": "dracula-ui/src/base/spacing.ts",
+              "name": "TypeLiteral"
+            }
+          ],
+          "required": false,
+          "type": {
+            "name": "\"lg\" | \"md\" | \"sm\" | \"none\" | \"xxs\" | \"xs\" | \"auto\" | undefined"
+          }
+        },
+        "mb": {
+          "defaultValue": null,
+          "description": "",
+          "name": "mb",
+          "declarations": [
+            {
+              "fileName": "dracula-ui/src/base/spacing.ts",
+              "name": "TypeLiteral"
+            }
+          ],
+          "required": false,
+          "type": {
+            "name": "\"lg\" | \"md\" | \"sm\" | \"none\" | \"xxs\" | \"xs\" | \"auto\" | undefined"
+          }
+        },
+        "ml": {
+          "defaultValue": null,
+          "description": "",
+          "name": "ml",
+          "declarations": [
+            {
+              "fileName": "dracula-ui/src/base/spacing.ts",
+              "name": "TypeLiteral"
+            }
+          ],
+          "required": false,
+          "type": {
+            "name": "\"lg\" | \"md\" | \"sm\" | \"none\" | \"xxs\" | \"xs\" | \"auto\" | undefined"
+          }
+        },
+        "mr": {
+          "defaultValue": null,
+          "description": "",
+          "name": "mr",
+          "declarations": [
+            {
+              "fileName": "dracula-ui/src/base/spacing.ts",
+              "name": "TypeLiteral"
+            }
+          ],
+          "required": false,
+          "type": {
+            "name": "\"lg\" | \"md\" | \"sm\" | \"none\" | \"xxs\" | \"xs\" | \"auto\" | undefined"
+          }
+        }
+      },
+      "ext_com_draculaui_docgen": {
+        "tags": {},
+        "description": "Textarea is a styled HTML Textarea.\n\nThere are no behavior changes applied to the native HTML tag other\nthan light styling done via CSS in order to keep inputs accessible.",
+        "displayName": "Textarea",
+        "methods": [],
+        "props": {
+          "color": {
+            "defaultValue": null,
+            "description": "The Dracula UI theme color to be used",
+            "name": "color",
+            "parent": {
+              "fileName": "src/components/Textarea/Textarea.tsx",
+              "name": "TextareaProps"
+            },
+            "declarations": [
+              {
+                "fileName": "src/components/Textarea/Textarea.tsx",
+                "name": "TextareaProps"
+              }
+            ],
+            "required": false,
+            "type": {
+              "name": "\"cyan\" | \"green\" | \"orange\" | \"pink\" | \"purple\" | \"red\" | \"yellow\" | \"white\" | undefined"
+            }
+          },
+          "size": {
+            "defaultValue": null,
+            "description": "Controls the size of the textarea based on pre-configured Dracula UI sizes.",
+            "name": "size",
+            "parent": {
+              "fileName": "src/components/Textarea/Textarea.tsx",
+              "name": "TextareaProps"
+            },
+            "declarations": [
+              {
+                "fileName": "src/components/Textarea/Textarea.tsx",
+                "name": "TextareaProps"
+              }
+            ],
+            "required": false,
+            "type": {
+              "name": "number | \"lg\" | \"md\" | \"sm\" | undefined"
+            }
+          },
+          "borderSize": {
+            "defaultValue": null,
+            "description": "Controls the border size of the textarea based on pre-configured Dracula UI sizes.",
+            "name": "borderSize",
+            "parent": {
+              "fileName": "src/components/Textarea/Textarea.tsx",
+              "name": "TextareaProps"
+            },
+            "declarations": [
+              {
+                "fileName": "src/components/Textarea/Textarea.tsx",
+                "name": "TextareaProps"
+              }
+            ],
+            "required": false,
+            "type": {
+              "name": "\"lg\" | \"md\" | \"sm\" | undefined"
+            }
+          },
+          "variant": {
+            "defaultValue": null,
+            "description": "Controls the variation the textarea.\n`normal` -> Regular Textarea component with a light background color.\n`outline` -> Keeps the accent color, but removes the background.",
+            "name": "variant",
+            "parent": {
+              "fileName": "src/components/Textarea/Textarea.tsx",
+              "name": "TextareaProps"
+            },
+            "declarations": [
+              {
+                "fileName": "src/components/Textarea/Textarea.tsx",
+                "name": "TextareaProps"
+              }
+            ],
+            "required": false,
+            "type": {
+              "name": "\"normal\" | \"outline\" | undefined"
+            }
+          },
+          "p": {
+            "defaultValue": null,
+            "description": "",
+            "name": "p",
+            "declarations": [
+              {
+                "fileName": "dracula-ui/src/base/spacing.ts",
+                "name": "TypeLiteral"
+              }
+            ],
+            "required": false,
+            "type": {
+              "name": "\"lg\" | \"md\" | \"sm\" | \"none\" | \"xxs\" | \"xs\" | undefined"
+            }
+          },
+          "py": {
+            "defaultValue": null,
+            "description": "",
+            "name": "py",
+            "declarations": [
+              {
+                "fileName": "dracula-ui/src/base/spacing.ts",
+                "name": "TypeLiteral"
+              }
+            ],
+            "required": false,
+            "type": {
+              "name": "\"lg\" | \"md\" | \"sm\" | \"none\" | \"xxs\" | \"xs\" | undefined"
+            }
+          },
+          "px": {
+            "defaultValue": null,
+            "description": "",
+            "name": "px",
+            "declarations": [
+              {
+                "fileName": "dracula-ui/src/base/spacing.ts",
+                "name": "TypeLiteral"
+              }
+            ],
+            "required": false,
+            "type": {
+              "name": "\"lg\" | \"md\" | \"sm\" | \"none\" | \"xxs\" | \"xs\" | undefined"
+            }
+          },
+          "pt": {
+            "defaultValue": null,
+            "description": "",
+            "name": "pt",
+            "declarations": [
+              {
+                "fileName": "dracula-ui/src/base/spacing.ts",
+                "name": "TypeLiteral"
+              }
+            ],
+            "required": false,
+            "type": {
+              "name": "\"lg\" | \"md\" | \"sm\" | \"none\" | \"xxs\" | \"xs\" | undefined"
+            }
+          },
+          "pb": {
+            "defaultValue": null,
+            "description": "",
+            "name": "pb",
+            "declarations": [
+              {
+                "fileName": "dracula-ui/src/base/spacing.ts",
+                "name": "TypeLiteral"
+              }
+            ],
+            "required": false,
+            "type": {
+              "name": "\"lg\" | \"md\" | \"sm\" | \"none\" | \"xxs\" | \"xs\" | undefined"
+            }
+          },
+          "pl": {
+            "defaultValue": null,
+            "description": "",
+            "name": "pl",
+            "declarations": [
+              {
+                "fileName": "dracula-ui/src/base/spacing.ts",
+                "name": "TypeLiteral"
+              }
+            ],
+            "required": false,
+            "type": {
+              "name": "\"lg\" | \"md\" | \"sm\" | \"none\" | \"xxs\" | \"xs\" | undefined"
+            }
+          },
+          "pr": {
+            "defaultValue": null,
+            "description": "",
+            "name": "pr",
+            "declarations": [
+              {
+                "fileName": "dracula-ui/src/base/spacing.ts",
+                "name": "TypeLiteral"
+              }
+            ],
+            "required": false,
+            "type": {
+              "name": "\"lg\" | \"md\" | \"sm\" | \"none\" | \"xxs\" | \"xs\" | undefined"
+            }
+          },
+          "m": {
+            "defaultValue": null,
+            "description": "",
+            "name": "m",
+            "declarations": [
+              {
+                "fileName": "dracula-ui/src/base/spacing.ts",
+                "name": "TypeLiteral"
+              }
+            ],
+            "required": false,
+            "type": {
+              "name": "\"lg\" | \"md\" | \"sm\" | \"none\" | \"xxs\" | \"xs\" | \"auto\" | undefined"
+            }
+          },
+          "my": {
+            "defaultValue": null,
+            "description": "",
+            "name": "my",
+            "declarations": [
+              {
+                "fileName": "dracula-ui/src/base/spacing.ts",
+                "name": "TypeLiteral"
+              }
+            ],
+            "required": false,
+            "type": {
+              "name": "\"lg\" | \"md\" | \"sm\" | \"none\" | \"xxs\" | \"xs\" | \"auto\" | undefined"
+            }
+          },
+          "mx": {
+            "defaultValue": null,
+            "description": "",
+            "name": "mx",
+            "declarations": [
+              {
+                "fileName": "dracula-ui/src/base/spacing.ts",
+                "name": "TypeLiteral"
+              }
+            ],
+            "required": false,
+            "type": {
+              "name": "\"lg\" | \"md\" | \"sm\" | \"none\" | \"xxs\" | \"xs\" | \"auto\" | undefined"
+            }
+          },
+          "mt": {
+            "defaultValue": null,
+            "description": "",
+            "name": "mt",
+            "declarations": [
+              {
+                "fileName": "dracula-ui/src/base/spacing.ts",
+                "name": "TypeLiteral"
+              }
+            ],
+            "required": false,
+            "type": {
+              "name": "\"lg\" | \"md\" | \"sm\" | \"none\" | \"xxs\" | \"xs\" | \"auto\" | undefined"
+            }
+          },
+          "mb": {
+            "defaultValue": null,
+            "description": "",
+            "name": "mb",
+            "declarations": [
+              {
+                "fileName": "dracula-ui/src/base/spacing.ts",
+                "name": "TypeLiteral"
+              }
+            ],
+            "required": false,
+            "type": {
+              "name": "\"lg\" | \"md\" | \"sm\" | \"none\" | \"xxs\" | \"xs\" | \"auto\" | undefined"
+            }
+          },
+          "ml": {
+            "defaultValue": null,
+            "description": "",
+            "name": "ml",
+            "declarations": [
+              {
+                "fileName": "dracula-ui/src/base/spacing.ts",
+                "name": "TypeLiteral"
+              }
+            ],
+            "required": false,
+            "type": {
+              "name": "\"lg\" | \"md\" | \"sm\" | \"none\" | \"xxs\" | \"xs\" | \"auto\" | undefined"
+            }
+          },
+          "mr": {
+            "defaultValue": null,
+            "description": "",
+            "name": "mr",
+            "declarations": [
+              {
+                "fileName": "dracula-ui/src/base/spacing.ts",
+                "name": "TypeLiteral"
+              }
+            ],
+            "required": false,
+            "type": {
+              "name": "\"lg\" | \"md\" | \"sm\" | \"none\" | \"xxs\" | \"xs\" | \"auto\" | undefined"
+            }
+          }
+        }
+      }
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/src/components/Textarea/Textarea.tsx b/src/components/Textarea/Textarea.tsx
new file mode 100644
index 00000000..e5bbc243
--- /dev/null
+++ b/src/components/Textarea/Textarea.tsx
@@ -0,0 +1,80 @@
+import cx from 'classnames/dedupe'
+import React, { TextareaHTMLAttributes } from 'react'
+import { BaseColorMap } from '../../base/colors'
+import {
+  cleanProps,
+  marginMixin,
+  MarginMixin,
+  paddingMixin,
+  PaddingMixin
+} from '../../base/spacing'
+
+export const textareaVariants = {
+  normal: 'drac-textarea',
+  outline: 'drac-textarea-outline'
+}
+
+export const textareaSizes = {
+  lg: 'drac-textarea-lg',
+  md: 'drac-textarea',
+  sm: 'drac-textarea-sm'
+}
+
+export const textareaBorderSizes = {
+  lg: 'drac-textarea-border-lg',
+  md: 'drac-textarea-border-md',
+  sm: 'drac-textarea-border-sm'
+}
+
+export const textareaColors: BaseColorMap & { white: string } = {
+  white: 'drac-textarea-white drac-text-white',
+  cyan: 'drac-textarea-cyandrac-text-cyan',
+  green: 'drac-textarea-green drac-text-green',
+  orange: 'drac-textarea-orange drac-text-orange',
+  pink: 'drac-textarea-pink drac-text-pink',
+  purple: 'drac-textarea-purple drac-text-purple',
+  red: 'drac-textarea-red drac-text-red',
+  yellow: 'drac-textarea-yellow drac-text-yellow'
+}
+
+export interface TextareaProps 
+  extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>, 
+  PaddingMixin, 
+  MarginMixin {
+  
+  color?: keyof typeof textareaColors
+
+  size?: keyof typeof textareaSizes | number
+
+  borderSize?: keyof typeof textareaBorderSizes
+
+  variant?: keyof typeof textareaVariants
+}
+
+export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  (props, ref) => {
+    const { color, size, borderSize, variant, ...htmlProps} = props
+
+    const finalProps: Record<string, any> = {
+      ...htmlProps,
+	  className: cx(
+	    `drac-textarea`,
+	    props.className,
+	    variant && textareaVariants[variant],
+	    size && typeof size === 'string' && textareaSizes[size],
+	    borderSize && textareaBorderSizes[borderSize],
+	    color && textareaColors[color],
+	    ...paddingMixin(props),
+	    ...marginMixin(props)
+	  )
+    }
+
+    if (size && typeof size === 'number') {
+	  finalProps[size] = size
+    }
+
+    return <textarea ref={ref} {...cleanProps(finalProps)}></textarea>
+  }
+)
+
+Textarea.displayName = 'Textarea'
diff --git a/src/components/Textarea/__tests__/Textarea.test.tsx b/src/components/Textarea/__tests__/Textarea.test.tsx
new file mode 100644
index 00000000..942bf2a8
--- /dev/null
+++ b/src/components/Textarea/__tests__/Textarea.test.tsx
@@ -0,0 +1,130 @@
+import React from 'react'
+import { docs } from '@/documentation/site-docs'
+import { snapshot } from '@/documentation/render-component'
+import { Box } from '@/components/Box/Box'
+import { Textarea } from '@/components/Textarea/Textarea'
+import { Heading } from '@/components/Heading/Heading'
+
+docs(Textarea, {
+  basic() {
+    return snapshot('Usage', Usage, 'Styles or abstrats HTML textarea elements.')
+  },
+  variations() {
+  	return [
+  	  snapshot(
+  	  	'Colors',
+  	  	Colors,
+  	  	'Textareas can be customized to use any of the Dracula UI theme colors.'
+  	  ),
+  	  snapshot(
+  	  	'Sizes',
+  	  	Sizes,
+  	  	'Textareaas can be customized to use several different sizes.'
+  	  ),
+  	  snapshot(
+  	  	'Variants',
+  	  	Variants,
+  	  	'Use the `outline` variant to represent subtler Textareas'
+  	  ),
+  	  snapshot(
+  	  	'Border Sizes',
+  	  	BorderSizes,
+  	  	'Border size can be customized to use several different sizes'
+  	  )
+  	]
+  }
+})
+
+function Usage() {
+	return <Textarea placeholder="Textarea" color="white"></Textarea>
+}
+
+function Colors() {
+  return (
+    <Box>
+      <Textarea color="purple" placeholder="purple" m="xs"></Textarea>
+      <Textarea color="green" placeholder="green" m="xs"></Textarea>
+    </Box>
+  )
+}
+
+function Sizes() {
+  return (
+    <Box>
+      <Textarea color="white" size="sm" placeholder="small" m="xs"></Textarea>
+      <Textarea color="white" size="md" placeholder="medium" m="xs"></Textarea>
+      <Textarea color="white" size="lg" placeholder="large" m="xs"></Textarea>
+    </Box>
+  )
+}
+
+function Variants() {
+  return (
+    <Box>
+      <Textarea color="white" variant="normal" placeholder="normal" m="xs"></Textarea>
+      <Textarea color="white" variant="outline" placeholder="outline" m="xs"></Textarea>
+    </Box>
+  )
+}
+
+function BorderSizes() {
+  return (
+    <Box>
+      <Box mb="sm">
+        <Heading size="sm">sm</Heading>
+        <Textarea
+          color="green"
+          variant="normal"
+          borderSize="sm"
+          placeholder="small border outline"
+          m="xs"
+        ></Textarea>
+        <Textarea
+          color="green"
+          variant="outline"
+          borderSize="sm"
+          placeholder="small border outline"
+          m="xs"
+        ></Textarea>
+      </Box>
+
+      <Box mb="sm">
+        <Heading size="sm">md</Heading>
+
+        <Textarea
+          color="purple"
+          variant="normal"
+          borderSize="md"
+          placeholder="medium border outline"
+          m="xs"
+        ></Textarea>
+        <Textarea
+          color="purple"
+          variant="outline"
+          borderSize="md"
+          placeholder="medium border outline"
+          m="xs"
+        ></Textarea>
+      </Box>
+
+      <Box mb="sm">
+        <Heading size="sm">lg</Heading>
+
+        <Textarea
+          color="yellow"
+          variant="normal"
+          borderSize="lg"
+          placeholder="large border outline"
+          m="xs"
+        ></Textarea>
+        <Textarea
+          color="yellow"
+          variant="outline"
+          borderSize="lg"
+          placeholder="large border outline"
+          m="xs"
+        ></Textarea>
+      </Box>
+    </Box>
+  )
+}
diff --git a/src/components/Textarea/__tests__/__snapshots__/Textarea.test.tsx.snap b/src/components/Textarea/__tests__/__snapshots__/Textarea.test.tsx.snap
new file mode 100644
index 00000000..5bf4f6c0
--- /dev/null
+++ b/src/components/Textarea/__tests__/__snapshots__/Textarea.test.tsx.snap
@@ -0,0 +1,186 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Site: Textarea Basic Usage 1`] = `
+Object {
+  "docs": "Styles or abstrats HTML textarea elements.",
+  "html": "<textarea
+  placeholder=\\"Textarea\\"
+  class=\\"drac-textarea drac-textarea-white drac-text-white\\"
+></textarea>
+",
+  "react": "<Textarea placeholder=\\"Textarea\\" color=\\"white\\" />;
+",
+  "title": "Usage",
+}
+`;
+
+exports[`Site: Textarea Border Sizes 1`] = `
+Object {
+  "docs": "Border size can be customized to use several different sizes",
+  "html": "<div class=\\"drac-box\\">
+  <div class=\\"drac-box drac-mb-sm\\">
+    <h2 class=\\"drac-heading drac-heading-sm drac-text-white\\">sm</h2>
+    <textarea
+      placeholder=\\"small border outline\\"
+      class=\\"drac-textarea drac-textarea-border-sm drac-textarea-green drac-text-green drac-m-xs\\"
+    ></textarea
+    ><textarea
+      placeholder=\\"small border outline\\"
+      class=\\"drac-textarea drac-textarea-outline drac-textarea-border-sm drac-textarea-green drac-text-green drac-m-xs\\"
+    ></textarea>
+  </div>
+  <div class=\\"drac-box drac-mb-sm\\">
+    <h2 class=\\"drac-heading drac-heading-sm drac-text-white\\">md</h2>
+    <textarea
+      placeholder=\\"medium border outline\\"
+      class=\\"drac-textarea drac-textarea-border-md drac-textarea-purple drac-text-purple drac-m-xs\\"
+    ></textarea
+    ><textarea
+      placeholder=\\"medium border outline\\"
+      class=\\"drac-textarea drac-textarea-outline drac-textarea-border-md drac-textarea-purple drac-text-purple drac-m-xs\\"
+    ></textarea>
+  </div>
+  <div class=\\"drac-box drac-mb-sm\\">
+    <h2 class=\\"drac-heading drac-heading-sm drac-text-white\\">lg</h2>
+    <textarea
+      placeholder=\\"large border outline\\"
+      class=\\"drac-textarea drac-textarea-border-lg drac-textarea-yellow drac-text-yellow drac-m-xs\\"
+    ></textarea
+    ><textarea
+      placeholder=\\"large border outline\\"
+      class=\\"drac-textarea drac-textarea-outline drac-textarea-border-lg drac-textarea-yellow drac-text-yellow drac-m-xs\\"
+    ></textarea>
+  </div>
+</div>
+",
+  "react": "<Box>
+  <Box mb=\\"sm\\">
+    <Heading size=\\"sm\\">sm</Heading>
+    <Textarea
+      color=\\"green\\"
+      variant=\\"normal\\"
+      borderSize=\\"sm\\"
+      placeholder=\\"small border outline\\"
+      m=\\"xs\\"
+    />
+    <Textarea
+      color=\\"green\\"
+      variant=\\"outline\\"
+      borderSize=\\"sm\\"
+      placeholder=\\"small border outline\\"
+      m=\\"xs\\"
+    />
+  </Box>
+  <Box mb=\\"sm\\">
+    <Heading size=\\"sm\\">md</Heading>
+    <Textarea
+      color=\\"purple\\"
+      variant=\\"normal\\"
+      borderSize=\\"md\\"
+      placeholder=\\"medium border outline\\"
+      m=\\"xs\\"
+    />
+    <Textarea
+      color=\\"purple\\"
+      variant=\\"outline\\"
+      borderSize=\\"md\\"
+      placeholder=\\"medium border outline\\"
+      m=\\"xs\\"
+    />
+  </Box>
+  <Box mb=\\"sm\\">
+    <Heading size=\\"sm\\">lg</Heading>
+    <Textarea
+      color=\\"yellow\\"
+      variant=\\"normal\\"
+      borderSize=\\"lg\\"
+      placeholder=\\"large border outline\\"
+      m=\\"xs\\"
+    />
+    <Textarea
+      color=\\"yellow\\"
+      variant=\\"outline\\"
+      borderSize=\\"lg\\"
+      placeholder=\\"large border outline\\"
+      m=\\"xs\\"
+    />
+  </Box>
+</Box>;
+",
+  "title": "Border Sizes",
+}
+`;
+
+exports[`Site: Textarea Colors 1`] = `
+Object {
+  "docs": "Textareas can be customized to use any of the Dracula UI theme colors.",
+  "html": "<div class=\\"drac-box\\">
+  <textarea
+    placeholder=\\"purple\\"
+    class=\\"drac-textarea drac-textarea-purple drac-text-purple drac-m-xs\\"
+  ></textarea
+  ><textarea
+    placeholder=\\"green\\"
+    class=\\"drac-textarea drac-textarea-green drac-text-green drac-m-xs\\"
+  ></textarea>
+</div>
+",
+  "react": "<Box>
+  <Textarea color=\\"purple\\" placeholder=\\"purple\\" m=\\"xs\\" />
+  <Textarea color=\\"green\\" placeholder=\\"green\\" m=\\"xs\\" />
+</Box>;
+",
+  "title": "Colors",
+}
+`;
+
+exports[`Site: Textarea Sizes 1`] = `
+Object {
+  "docs": "Textareaas can be customized to use several different sizes.",
+  "html": "<div class=\\"drac-box\\">
+  <textarea
+    placeholder=\\"small\\"
+    class=\\"drac-textarea drac-textarea-sm drac-textarea-white drac-text-white drac-m-xs\\"
+  ></textarea
+  ><textarea
+    placeholder=\\"medium\\"
+    class=\\"drac-textarea drac-textarea-white drac-text-white drac-m-xs\\"
+  ></textarea
+  ><textarea
+    placeholder=\\"large\\"
+    class=\\"drac-textarea drac-textarea-lg drac-textarea-white drac-text-white drac-m-xs\\"
+  ></textarea>
+</div>
+",
+  "react": "<Box>
+  <Textarea color=\\"white\\" size=\\"sm\\" placeholder=\\"small\\" m=\\"xs\\" />
+  <Textarea color=\\"white\\" size=\\"md\\" placeholder=\\"medium\\" m=\\"xs\\" />
+  <Textarea color=\\"white\\" size=\\"lg\\" placeholder=\\"large\\" m=\\"xs\\" />
+</Box>;
+",
+  "title": "Sizes",
+}
+`;
+
+exports[`Site: Textarea Variants 1`] = `
+Object {
+  "docs": "Use the \`outline\` variant to represent subtler Textareas",
+  "html": "<div class=\\"drac-box\\">
+  <textarea
+    placeholder=\\"normal\\"
+    class=\\"drac-textarea drac-textarea-white drac-text-white drac-m-xs\\"
+  ></textarea
+  ><textarea
+    placeholder=\\"outline\\"
+    class=\\"drac-textarea drac-textarea-outline drac-textarea-white drac-text-white drac-m-xs\\"
+  ></textarea>
+</div>
+",
+  "react": "<Box>
+  <Textarea color=\\"white\\" variant=\\"normal\\" placeholder=\\"normal\\" m=\\"xs\\" />
+  <Textarea color=\\"white\\" variant=\\"outline\\" placeholder=\\"outline\\" m=\\"xs\\" />
+</Box>;
+",
+  "title": "Variants",
+}
+`;
diff --git a/src/index.tsx b/src/index.tsx
index fd04c951..e844c32b 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -2,6 +2,7 @@ import './styles/dracula-ui.css'
 
 export * from './components/Heading/Heading'
 export * from './components/Text/Text'
+export * from './components/Textarea/Textarea'
 export * from './components/Anchor/Anchor'
 export * from './components/Paragraph/Paragraph'
 export * from './components/Box/Box'
diff --git a/src/styles/dracula-ui.css b/src/styles/dracula-ui.css
index d8c2c5da..f65a31e6 100644
--- a/src/styles/dracula-ui.css
+++ b/src/styles/dracula-ui.css
@@ -14,5 +14,6 @@
 @import './card.css';
 @import './tabs.css';
 @import './table.css';
+@import './textarea.css';
 @import './list.css';
 @import './backgrounds.css';
\ No newline at end of file
diff --git a/src/styles/textarea.css b/src/styles/textarea.css
new file mode 100644
index 00000000..95d8aee1
--- /dev/null
+++ b/src/styles/textarea.css
@@ -0,0 +1,63 @@
+.textarea {
+	border-radius: var(--rounded-lg);
+	box-sizing: border-box;
+	width: 100%;
+	outline: none;
+	background: var(--blackSecondary);
+	border: 0.3rem solid transparent;
+	transition: 0.3s ease-in-out all;
+	-webkit-appearance: textfield;
+}
+
+.textarea:focus {
+	border-color: var(--white);
+}
+
+.textarea::placeholder {
+	color: var(--blackTernary);
+}
+
+.textarea-outline {
+	background: transparent;
+	border-color: var(--blackTernary);
+}
+
+@each $color in black, blackSecondary, white, cyan, green, orange, pink, purple, 
+  red, yellow
+{
+  .textarea-outline.textarea-$(color),
+  .textarea-outline.textarea-$(color):focus,
+  .textarea.textarea-$(color):focus {
+	border-color: var(--$(color));
+  }
+}
+
+.textarea.textarea-sm {
+	padding: 0 var(--spacing-3);
+	height: var(--spacing-12);
+	font-size: var(--font-sm);
+}
+
+.textarea {
+	padding: 0 var(--spacing-4);
+	height: var(--spacing-32);
+	font-size: var(--font-md);
+}
+
+.textarea.textarea-lg {
+	padding: 0 var(--spacing-6);
+	height: var(--spacing-64);
+	font-size: var(--font-lg);
+}
+
+.textarea.textarea-border-sm {
+	border-width: 0.1rem;
+}
+
+.textarea.textarea-border-md {
+	border-width: 0.2rem;
+}
+
+.textarea.textarea-border-lg {
+	border-width: 0.3rem;
+}