diff --git a/.changeset/rude-forks-admire.md b/.changeset/rude-forks-admire.md
new file mode 100644
index 000000000..5abf10a4d
--- /dev/null
+++ b/.changeset/rude-forks-admire.md
@@ -0,0 +1,5 @@
+---
+"@radui/ui": minor
+---
+
+Addition of color and radius api support in TextArea and new styling
diff --git a/src/components/ui/TextArea/TextArea.tsx b/src/components/ui/TextArea/TextArea.tsx
index 9381c0291..df588534c 100644
--- a/src/components/ui/TextArea/TextArea.tsx
+++ b/src/components/ui/TextArea/TextArea.tsx
@@ -1,11 +1,13 @@
 'use client';
 import React from 'react';
 import clsx from 'clsx';
-import TextAreaRoot from './fragments/TextAreaRoot';
-import TextAreaInput from './fragments/TextAreaInput';
+import TextAreaRoot, { TextAreaRootProps } from './fragments/TextAreaRoot';
+import TextAreaInput, { TextAreaInputProps } from './fragments/TextAreaInput';
 
-export type TextAreaProps = React.ComponentPropsWithoutRef<'div'> & {
+export type TextAreaProps = React.ComponentPropsWithoutRef<'div'> & TextAreaRootProps & TextAreaInputProps & {
     customRootClass?: string;
+    readonly ?: boolean;
+    disabled ?: boolean;
 };
 
 type TextAreaComponent = React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<React.ElementRef<'div'>>> & {
@@ -13,10 +15,10 @@ type TextAreaComponent = React.ForwardRefExoticComponent<TextAreaProps & React.R
     Root: typeof TextAreaRoot;
 };
 
-const TextArea = React.forwardRef<React.ElementRef<'div'>, TextAreaProps>(({ customRootClass = '', className = '', children, ...props }, ref) => {
+const TextArea = React.forwardRef<React.ElementRef<'div'>, TextAreaProps>(({ customRootClass = '', placeholder = '', className = '', disabled = false, readonly = false, children, ...props }, ref) => {
     return (
         <TextAreaRoot ref={ref} customRootClass={customRootClass} className={clsx(className)} {...props}>
-            <TextAreaInput placeholder="enter text">
+            <TextAreaInput placeholder={placeholder} disabled={disabled} readOnly={readonly}>
                 {children}
             </TextAreaInput>
             {children}
diff --git a/src/components/ui/TextArea/fragments/TextAreaRoot.tsx b/src/components/ui/TextArea/fragments/TextAreaRoot.tsx
index d76af0010..4ccc74245 100644
--- a/src/components/ui/TextArea/fragments/TextAreaRoot.tsx
+++ b/src/components/ui/TextArea/fragments/TextAreaRoot.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { customClassSwitcher } from '~/core';
 import clsx from 'clsx';
-import { useCreateDataAttribute } from '~/core/hooks/createDataAttribute';
+import { useCreateDataAttribute, useComposeAttributes, useCreateDataAccentColorAttribute } from '~/core/hooks/createDataAttribute';
 
 const COMPONENT_NAME = 'TextArea';
 
@@ -10,15 +10,19 @@ export type TextAreaRootProps = React.ComponentPropsWithoutRef<'div'> & {
     variant?: string;
     size?: string;
     resize?: 'none' | 'vertical' | 'horizontal' | 'both';
+    color?: string;
+    radius?: string;
 };
 
 const TextAreaRoot = React.forwardRef<React.ElementRef<'div'>, TextAreaRootProps>(
-    ({ children, customRootClass = '', className = '', variant = '', size = '', resize = 'both', ...props }, ref) => {
+    ({ children, customRootClass = '', className = '', variant = '', size = '', resize = 'both', color = '', radius = '', ...props }, ref) => {
         const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
-        const dataAttributes = useCreateDataAttribute('textarea', { variant, size, resize });
+        const dataAttributes = useCreateDataAttribute('textarea', { variant, size, resize, radius});
+         const accentAttributes = useCreateDataAccentColorAttribute(color);
+         const composedAttributes = useComposeAttributes(dataAttributes(), accentAttributes());
 
         return (
-            <div ref={ref} className={clsx(rootClass, className)} {...props} {...dataAttributes()}>
+            <div ref={ref} className={clsx(rootClass, className)} {...props} {...composedAttributes()}>
                 {children}
             </div>
         );
diff --git a/src/components/ui/TextArea/stories/TextArea.stories.tsx b/src/components/ui/TextArea/stories/TextArea.stories.tsx
index 70f3c696c..725244ca3 100644
--- a/src/components/ui/TextArea/stories/TextArea.stories.tsx
+++ b/src/components/ui/TextArea/stories/TextArea.stories.tsx
@@ -2,11 +2,20 @@ import React from 'react';
 import TextArea from '../TextArea';
 import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
 
+const Variants = ['solid', 'soft', 'outline', 'ghost'];
+const Sizes = ['small', 'medium', 'large'];
+const Resizes: Array<'none' | 'vertical' | 'horizontal' | 'both' | undefined> = ['none', 'vertical', 'horizontal', 'both', undefined ];
+const Radius = ['none', 'small', 'medium', 'large'];
 const Template = (args:any) => {
     return <SandboxEditor className="space-y-4 pt-4">
         <TextArea {...args} >
 
         </TextArea>
+
+        <TextArea disabled placeholder='this textarea is disabled'/>
+           
+
+        <TextArea readonly className='w-10' placeholder='this textarea is readonly'/>
     </SandboxEditor>;
 };
 
@@ -23,3 +32,35 @@ export const All = {
         placeholder: 'Type something here'
     }
 };
+
+export const Size = () =>{
+    return <SandboxEditor className="space-y-4 pt-4">
+        {Sizes.map((size) => (
+            <TextArea key={size} size={size} placeholder={size} />
+        ))}
+    </SandboxEditor>;
+}
+
+export const Variant = () =>{
+    return <SandboxEditor className="space-y-4 pt-4">
+        {Variants.map((variant) => (
+            <TextArea key={variant} variant={variant} placeholder={variant} />
+        ))}
+    </SandboxEditor>;
+}
+
+export const Resize = () =>{
+    return <SandboxEditor className="space-y-4 pt-4">
+        {Resizes.map((resize) => (
+            <TextArea key={resize} resize={resize} placeholder={resize} />
+        ))}
+    </SandboxEditor>;
+}
+
+export const TextAreaRadius = () =>{
+    return <SandboxEditor className="space-y-4 pt-4">
+        {Radius.map((radius) => (
+            <TextArea key={radius} radius={radius} placeholder={radius} />
+        ))}
+    </SandboxEditor>;
+}
diff --git a/styles/themes/components/textarea.scss b/styles/themes/components/textarea.scss
index f0639f1cb..39bc88b87 100644
--- a/styles/themes/components/textarea.scss
+++ b/styles/themes/components/textarea.scss
@@ -1,36 +1,143 @@
-.rad-ui-text-area {
-  textarea {
-    border: 2px solid var(--rad-ui-color-accent-600);
-    font-size: 16px;
-    padding: 8px;
-    line-height: 1.5;
-    border-radius: 8px;
-    color: var(--rad-ui-color-gray-1000);
-    min-height: 100px;
-    background-color: var(--rad-ui-color-accent-100);
-
-    &::placeholder {
-      color: var(--rad-ui-color-accent-500);
-    }
-
-    &:focus {
-      outline: 2px solid var(--rad-ui-color-accent-500);
-    }
-  }
-  
-  &[data-textarea-resize="horizontal"] textarea {
-    resize: horizontal;
-  }
-
-  &[data-textarea-resize="vertical"] textarea {
-    resize: vertical;
-  }
-
-  &[data-textarea-resize="none"] textarea {
-    resize: none;
-  }
-
-  &[data-textarea-resize="both"] textarea {
-    resize: both;
-  }
+.rad-ui-text-area textarea {
+  display: block;
+  width: 100%;
+  min-height: 100px;
+
+  box-sizing: border-box;
+  resize: none;
+
+  font-family: inherit;
+  font-size: 16px;
+  line-height: 1.5;
+
+  padding: 10px 12px;
+  border-radius: 8px;
+
+  color: var(--rad-ui-color-accent-1000);
+  background-color: var(--rad-ui-color-accent-100);
+
+  border: 2px solid var(--rad-ui-color-accent-400);
+
+  transition:
+    border-color 0.15s ease,
+    box-shadow 0.15s ease,
+    background-color 0.15s ease;
+}
+
+.rad-ui-text-area textarea::placeholder {
+  color: var(--rad-ui-color-accent-500);
+}
+
+.rad-ui-text-area textarea:focus {
+  outline: none;
+  border-color: var(--rad-ui-color-accent-500);
+  box-shadow: 0 0 0 2px var(--rad-ui-color-accent-200);
+}
+
+
+.rad-ui-text-area textarea::-webkit-scrollbar {
+  width: 10px;
+}
+
+.rad-ui-text-area textarea::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.rad-ui-text-area textarea::-webkit-scrollbar-thumb {
+  background-color: var(--rad-ui-color-accent-400);
+  border-radius: 6px;
+  border: 3px solid transparent;
+  background-clip: content-box;
+}
+
+.rad-ui-text-area textarea::-webkit-scrollbar-thumb:hover {
+  background-color: var(--rad-ui-color-accent-500);
+}
+
+
+.rad-ui-text-area[data-textarea-resize="horizontal"] textarea {
+  resize: horizontal;
+}
+
+.rad-ui-text-area[data-textarea-resize="vertical"] textarea {
+  resize: vertical;
+}
+
+.rad-ui-text-area[data-textarea-resize="none"] textarea {
+  resize: none;
+}
+
+.rad-ui-text-area[data-textarea-resize="both"] textarea {
+  resize: both;
+}
+
+.rad-ui-text-area[data-textarea-radius="none"] textarea {
+  border-radius: 0;
+}
+
+.rad-ui-text-area[data-textarea-radius="small"] textarea {
+  border-radius: 4px;
+}
+
+.rad-ui-text-area[data-textarea-radius="medium"] textarea {
+  border-radius: 8px;
+}
+
+.rad-ui-text-area[data-textarea-radius="large"] textarea {
+  border-radius: 12px;
+}
+
+.rad-ui-text-area[data-textarea-radius="full"] textarea {
+  border-radius: 16px;
+}
+
+.rad-ui-text-area[data-textarea-size="small"] textarea {
+  font-size: 12px;
+}
+
+.rad-ui-text-area[data-textarea-size="medium"] textarea {
+  font-size: 14px;
+}
+
+.rad-ui-text-area[data-textarea-size="large"] textarea {
+  font-size: 16px;
+}
+
+.rad-ui-text-area[data-textarea-variant="soft"] textarea {
+  border: none;
+  background-color: var(--rad-ui-color-accent-200);
+  color: var(--rad-ui-color-accent-1000);
+}
+
+.rad-ui-text-area[data-textarea-variant="outline"] textarea {
+  background-color: transparent;
+  border: 2px solid var(--rad-ui-color-accent-400);
+}
+
+.rad-ui-text-area[data-textarea-variant="solid"] textarea {
+  background-color: var(--rad-ui-color-accent-100);
+  border: 2px solid var(--rad-ui-color-accent-400);
+}
+
+
+.rad-ui-text-area[data-textarea-variant="ghost"] textarea {
+  background-color: transparent;
+  border: 2px solid transparent;
+}
+
+.rad-ui-text-area[data-textarea-variant="ghost"] textarea:focus {
+  border-color: var(--rad-ui-color-accent-500);
+}
+
+
+.rad-ui-text-area textarea:disabled,
+.rad-ui-text-area textarea:read-only {
+  background-color: var(--rad-ui-color-accent-200);
+  color: var(--rad-ui-color-accent-600);
+  cursor: not-allowed;
+}
+
+.rad-ui-text-area textarea:disabled::placeholder,
+.rad-ui-text-area textarea:read-only::placeholder {
+  color: var(--rad-ui-color-accent-500);
 }