diff --git a/packages/propel/src/scrollarea/scrollarea.tsx b/packages/propel/src/scrollarea/scrollarea.tsx
index b3f833015..e15d02e12 100644
--- a/packages/propel/src/scrollarea/scrollarea.tsx
+++ b/packages/propel/src/scrollarea/scrollarea.tsx
@@ -11,14 +11,27 @@ interface ScrollAreaProps extends React.ComponentProps<typeof BaseScrollArea.Roo
   orientation?: ScrollAreaOrientation;
   scrollType?: ScrollAreaScrollType;
   size?: ScrollAreaSize;
+  rootClassName?: string;
+  viewportClassName?: string;
 }
 
-function ScrollArea({ className, children, orientation, scrollType, size = "md", ...props }: ScrollAreaProps) {
+function ScrollArea({
+  children,
+  orientation,
+  scrollType,
+  size = "md",
+  rootClassName,
+  viewportClassName,
+  ...props
+}: ScrollAreaProps) {
   return (
-    <BaseScrollArea.Root data-slot="scroll-area" className={cn("relative", className)} {...props}>
+    <BaseScrollArea.Root data-slot="scroll-area" className={cn("relative", rootClassName)} {...props}>
       <BaseScrollArea.Viewport
         data-slot="scroll-area-viewport"
-        className="focus-visible:ring-ring/50 size-full overscroll-contain rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline"
+        className={cn(
+          "focus-visible:ring-ring/50 size-full overscroll-contain rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline",
+          viewportClassName
+        )}
       >
         {children}
       </BaseScrollArea.Viewport>