huntabyte · huntabyte · Jan 20, 2026
diff --git a/.changeset/bitter-animals-jump.md b/.changeset/bitter-animals-jump.md
@@ -0,0 +1,5 @@
+---
+"bits-ui": minor
+---
+
+feat(ScrollArea): allow overriding styles set by internal component logic if desired
diff --git a/packages/bits-ui/src/lib/bits/scroll-area/components/scroll-area-corner-impl.svelte b/packages/bits-ui/src/lib/bits/scroll-area/components/scroll-area-corner-impl.svelte
@@ -8,6 +8,7 @@
 		id,
 		children,
 		child,
+		style,
 		...restProps
 	}: Omit<ScrollAreaCornerProps, "id"> & {
 		id: string;
@@ -21,7 +22,7 @@
 		),
 	});
 
-	const mergedProps = $derived(mergeProps(restProps, cornerState.props));
+	const mergedProps = $derived(mergeProps(restProps, cornerState.props, { style }));
 </script>
 
 {#if child}

diff --git a/packages/bits-ui/src/lib/bits/scroll-area/components/scroll-area-scrollbar-auto.svelte b/packages/bits-ui/src/lib/bits/scroll-area/components/scroll-area-scrollbar-auto.svelte
@@ -5,10 +5,10 @@
 	import ScrollAreaScrollbarVisible from "./scroll-area-scrollbar-visible.svelte";
 	import PresenceLayer from "$lib/bits/utilities/presence-layer/presence-layer.svelte";
 
-	let { forceMount = false, ...restProps }: _ScrollbarStubProps = $props();
+	let { forceMount = false, style, ...restProps }: _ScrollbarStubProps = $props();
 
 	const scrollbarAutoState = ScrollAreaScrollbarAutoState.create();
-	const mergedProps = $derived(mergeProps(restProps, scrollbarAutoState.props));
+	const mergedProps = $derived(mergeProps(restProps, scrollbarAutoState.props, { style }));
 </script>
 
 <PresenceLayer

diff --git a/packages/bits-ui/src/lib/bits/scroll-area/components/scroll-area-scrollbar-hover.svelte b/packages/bits-ui/src/lib/bits/scroll-area/components/scroll-area-scrollbar-hover.svelte
@@ -8,14 +8,20 @@
 	import ScrollAreaScrollbarVisible from "./scroll-area-scrollbar-visible.svelte";
 	import PresenceLayer from "$lib/bits/utilities/presence-layer/presence-layer.svelte";
 
-	let { forceMount = false, ...restProps }: _ScrollbarStubProps = $props();
+	let { forceMount = false, style, ...restProps }: _ScrollbarStubProps = $props();
 
 	const scrollbarHoverState = ScrollAreaScrollbarHoverState.create();
 	const scrollbarAutoState = ScrollAreaScrollbarAutoState.create();
 	const mergedProps = $derived(
-		mergeProps(restProps, scrollbarHoverState.props, scrollbarAutoState.props, {
-			"data-state": scrollbarHoverState.isVisible ? "visible" : "hidden",
-		})
+		mergeProps(
+			restProps,
+			scrollbarHoverState.props,
+			scrollbarAutoState.props,
+			{
+				"data-state": scrollbarHoverState.isVisible ? "visible" : "hidden",
+			},
+			{ style }
+		)
 	);
 
 	const open = $derived(

diff --git a/packages/bits-ui/src/lib/bits/scroll-area/components/scroll-area-scrollbar-scroll.svelte b/packages/bits-ui/src/lib/bits/scroll-area/components/scroll-area-scrollbar-scroll.svelte
@@ -5,11 +5,11 @@
 	import ScrollAreaScrollbarVisible from "./scroll-area-scrollbar-visible.svelte";
 	import PresenceLayer from "$lib/bits/utilities/presence-layer/presence-layer.svelte";
 
-	let { forceMount = false, ...restProps }: _ScrollbarStubProps = $props();
+	let { forceMount = false, style, ...restProps }: _ScrollbarStubProps = $props();
 
 	const scrollbarScrollState = ScrollAreaScrollbarScrollState.create();
 
-	const mergedProps = $derived(mergeProps(restProps, scrollbarScrollState.props));
+	const mergedProps = $derived(mergeProps(restProps, scrollbarScrollState.props, { style }));
 </script>
 
 <PresenceLayer

diff --git a/packages/bits-ui/src/lib/bits/scroll-area/components/scroll-area-scrollbar-shared.svelte b/packages/bits-ui/src/lib/bits/scroll-area/components/scroll-area-scrollbar-shared.svelte
@@ -3,11 +3,11 @@
 	import { ScrollAreaScrollbarSharedState } from "../scroll-area.svelte.js";
 	import type { _ScrollbarStubProps } from "../types.js";
 
-	let { child, children, ...restProps }: _ScrollbarStubProps = $props();
+	let { child, children, style, ...restProps }: _ScrollbarStubProps = $props();
 
 	const scrollbarSharedState = ScrollAreaScrollbarSharedState.create();
 
-	const mergedProps = $derived(mergeProps(restProps, scrollbarSharedState.props));
+	const mergedProps = $derived(mergeProps(restProps, scrollbarSharedState.props, { style }));
 </script>
 
 {#if child}

diff --git a/packages/bits-ui/src/lib/bits/scroll-area/components/scroll-area-scrollbar-x.svelte b/packages/bits-ui/src/lib/bits/scroll-area/components/scroll-area-scrollbar-x.svelte
@@ -5,15 +5,15 @@
 	import type { _ScrollbarStubProps } from "../types.js";
 	import ScrollAreaScrollbarShared from "./scroll-area-scrollbar-shared.svelte";
 
-	let { ...restProps }: _ScrollbarStubProps = $props();
+	let { style, ...restProps }: _ScrollbarStubProps = $props();
 
 	const isMounted = new IsMounted();
 
 	const scrollbarXState = ScrollAreaScrollbarXState.create({
 		mounted: boxWith(() => isMounted.current),
 	});
 	// oxlint-disable-next-line no-explicit-any
-	const mergedProps = $derived(mergeProps(restProps, scrollbarXState.props)) as any;
+	const mergedProps = $derived(mergeProps(restProps, scrollbarXState.props, { style })) as any;
 </script>
 
 <ScrollAreaScrollbarShared {...mergedProps} />
diff --git a/packages/bits-ui/src/lib/bits/scroll-area/components/scroll-area-scrollbar-y.svelte b/packages/bits-ui/src/lib/bits/scroll-area/components/scroll-area-scrollbar-y.svelte
@@ -5,7 +5,7 @@
 	import type { _ScrollbarStubProps } from "../types.js";
 	import ScrollAreaScrollbarShared from "./scroll-area-scrollbar-shared.svelte";
 
-	let { ...restProps }: _ScrollbarStubProps = $props();
+	let { style, ...restProps }: _ScrollbarStubProps = $props();
 
 	const isMounted = new IsMounted();
 
@@ -14,7 +14,7 @@
 	});
 
 	// oxlint-disable-next-line no-explicit-any
-	const mergedProps = $derived(mergeProps(restProps, scrollbarYState.props)) as any;
+	const mergedProps = $derived(mergeProps(restProps, scrollbarYState.props, { style })) as any;
 </script>
 
 <ScrollAreaScrollbarShared {...mergedProps} />
diff --git a/packages/bits-ui/src/lib/bits/scroll-area/components/scroll-area-thumb-impl.svelte b/packages/bits-ui/src/lib/bits/scroll-area/components/scroll-area-thumb-impl.svelte
@@ -10,6 +10,7 @@
 		child,
 		children,
 		present,
+		style,
 		...restProps
 	}: Omit<ScrollAreaThumbProps, "forceMount" | "id"> & {
 		id: string;
@@ -28,11 +29,16 @@
 	});
 
 	const mergedProps = $derived(
-		mergeProps(restProps, thumbState.props, {
-			style: {
-				hidden: !present,
-			},
-		})
+		mergeProps(
+			restProps,
+			thumbState.props,
+			{ style },
+			{
+				style: {
+					hidden: !present,
+				},
+			}
+		)
 	);
 </script>
 

diff --git a/packages/bits-ui/src/lib/bits/scroll-area/components/scroll-area-viewport.svelte b/packages/bits-ui/src/lib/bits/scroll-area/components/scroll-area-viewport.svelte
@@ -10,6 +10,7 @@
 		ref = $bindable(null),
 		id = createId(uid),
 		children,
+		style,
 		...restProps
 	}: ScrollAreaViewportProps = $props();
 
@@ -21,7 +22,7 @@
 		),
 	});
 
-	const mergedProps = $derived(mergeProps(restProps, viewportState.props));
+	const mergedProps = $derived(mergeProps(restProps, viewportState.props, { style }));
 	const mergedContentProps = $derived(mergeProps({}, viewportState.contentProps));
 </script>
 

diff --git a/packages/bits-ui/src/lib/bits/scroll-area/components/scroll-area.svelte b/packages/bits-ui/src/lib/bits/scroll-area/components/scroll-area.svelte
@@ -14,6 +14,7 @@
 		scrollHideDelay = 600,
 		children,
 		child,
+		style,
 		...restProps
 	}: ScrollAreaRootProps = $props();
 
@@ -28,7 +29,7 @@
 		),
 	});
 
-	const mergedProps = $derived(mergeProps(restProps, rootState.props));
+	const mergedProps = $derived(mergeProps(restProps, rootState.props, { style }));
 </script>
 
 {#if child}

diff --git a/tests/src/tests/scroll-area/scroll-area-style-override-test.svelte b/tests/src/tests/scroll-area/scroll-area-style-override-test.svelte
@@ -0,0 +1,30 @@
+<script lang="ts" module>
+	import { ScrollArea, type WithoutChildrenOrChild } from "bits-ui";
+
+	export type ScrollAreaStyleOverrideTestProps = WithoutChildrenOrChild<ScrollArea.RootProps> & {
+		scrollbarYStyle?: string;
+	};
+</script>
+
+<script lang="ts">
+	let { scrollbarYStyle, ...restProps }: ScrollAreaStyleOverrideTestProps = $props();
+</script>
+
+<ScrollArea.Root
+	{...restProps}
+	type="always"
+	data-testid="root"
+	style="width: 200px; height: 100px;"
+>
+	<ScrollArea.Viewport class="h-full w-full" data-testid="viewport">
+		{#each Array(20) as _, i (i)}
+			<p>
+				Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos impedit rem,
+				repellat deserunt ducimus quasi nisi voluptatem.
+			</p>
+		{/each}
+	</ScrollArea.Viewport>
+	<ScrollArea.Scrollbar orientation="vertical" data-testid="scrollbar-y" style={scrollbarYStyle}>
+		<ScrollArea.Thumb data-testid="thumb-y" />
+	</ScrollArea.Scrollbar>
+</ScrollArea.Root>
diff --git a/tests/src/tests/scroll-area/scroll-area.browser.test.ts b/tests/src/tests/scroll-area/scroll-area.browser.test.ts
@@ -2,6 +2,9 @@ import { expect, it, vi, describe } from "vitest";
 import { render } from "vitest-browser-svelte";
 import { getTestKbd } from "../utils.js";
 import ScrollAreaTest, { type ScrollAreaTestProps } from "./scroll-area-test.svelte";
+import ScrollAreaStyleOverrideTest, {
+	type ScrollAreaStyleOverrideTestProps,
+} from "./scroll-area-style-override-test.svelte";
 import { expectExists, expectNotExists } from "../browser-utils";
 import { page, userEvent } from "@vitest/browser/context";
 
@@ -310,4 +313,14 @@ describe("ScrollArea", () => {
 
 		await vi.waitFor(() => expect(t.viewport.element().scrollLeft).not.toBe(initialScrollLeft));
 	});
+
+	it("should allow overriding predefined scrollbar styles via style prop", async () => {
+		render(ScrollAreaStyleOverrideTest, { scrollbarYStyle: "top: 20px;" });
+
+		const scrollbarY = page.getByTestId("scrollbar-y");
+		await expectExists(scrollbarY);
+
+		const element = scrollbarY.element() as HTMLElement;
+		expect(element.style.top).toBe("20px");
+	});
 });