diff --git a/sites/docs/content/components/scroll-area.md b/sites/docs/content/components/scroll-area.md
index 2de6c4e8c..5a5073787 100644
--- a/sites/docs/content/components/scroll-area.md
+++ b/sites/docs/content/components/scroll-area.md
@@ -4,7 +4,7 @@ description: Consistent scroll area across platforms.
 ---
 
 <script>
-	import { APISection, ComponentPreviewV2, ScrollAreaDemo } from '$lib/components'
+	import { APISection, ComponentPreviewV2, ScrollAreaDemo, ScrollAreaDemoScroll, ScrollAreaDemoAlways, ScrollAreaDemoAuto, ComponentPreviewMin } from '$lib/components'
 	export let schemas;
 </script>
 
@@ -25,9 +25,7 @@ description: Consistent scroll area across platforms.
 
 <ScrollArea.Root>
 	<ScrollArea.Viewport>
-		<ScrollArea.Content>
-			<!-- ... -->
-		</ScrollArea.Content>
+		<!-- Scrollable content here -->
 	</ScrollArea.Viewport>
 	<ScrollArea.Scrollbar orientation="vertical">
 		<ScrollArea.Thumb />
@@ -39,4 +37,64 @@ description: Consistent scroll area across platforms.
 </ScrollArea.Root>
 ```
 
+## Scroll Area Types
+
+### Hover
+
+The `hover` type is the default type of the scroll area, demonstrated in the featured example above. It only shows scrollbars when the user hovers over the scroll area and the content is larger than the viewport.
+
+### Scroll
+
+The `scroll` type displays the scrollbars when the user scrolls the content. This is similar to the behavior of MacOS.
+
+```svelte
+<ScrollArea.Root type="scroll">
+	<!-- ... -->
+</ScrollArea.Root>
+```
+
+<ComponentPreviewV2 name="scroll-area-demo-scroll" comp="Scroll Area">
+
+{#snippet preview()}
+<ScrollAreaDemoScroll />
+{/snippet}
+
+</ComponentPreviewV2>
+
+### Auto
+
+The `auto` type behaves similarly to your typical browser scrollbars. When the content is larger than the viewport, the scrollbars will appear and remain visible at all times.
+
+```svelte
+<ScrollArea.Root type="auto">
+	<!-- ... -->
+</ScrollArea.Root>
+```
+
+<ComponentPreviewV2 name="scroll-area-demo-auto" comp="Scroll Area">
+
+{#snippet preview()}
+<ScrollAreaDemoAuto />
+{/snippet}
+
+</ComponentPreviewV2>
+
+### Always
+
+The `always` type behaves as if you set `overflow: scroll` on the scroll area. Scrollbars will always be visible, even when the content is smaller than the viewport.
+
+```svelte
+<ScrollArea.Root type="always">
+	<!-- ... -->
+</ScrollArea.Root>
+```
+
+<ComponentPreviewV2 name="scroll-area-demo-always" comp="Scroll Area">
+
+{#snippet preview()}
+<ScrollAreaDemoAlways />
+{/snippet}
+
+</ComponentPreviewV2>
+
 <APISection {schemas} />
diff --git a/sites/docs/src/lib/components/component-preview-min.svelte b/sites/docs/src/lib/components/component-preview-min.svelte
new file mode 100644
index 000000000..cad2d1557
--- /dev/null
+++ b/sites/docs/src/lib/components/component-preview-min.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import { Collapsible } from "bits-ui";
+	import DemoContainer from "./demo-container.svelte";
+	import DemoCodeContainer from "./demo-code-container.svelte";
+
+	type Props = {
+		preview: Snippet;
+		children: Snippet;
+		class?: string;
+	};
+
+	let { preview, children, class: className }: Props = $props();
+</script>
+
+<DemoContainer>
+	{@render preview?.()}
+</DemoContainer>
+<Collapsible.Root>
+	<Collapsible.Trigger>Show code</Collapsible.Trigger>
+	<Collapsible.Content>
+		<DemoCodeContainer class={className}>
+			{@render children?.()}
+		</DemoCodeContainer>
+	</Collapsible.Content>
+</Collapsible.Root>
diff --git a/sites/docs/src/lib/components/component-preview-v2.svelte b/sites/docs/src/lib/components/component-preview-v2.svelte
index 75b92c556..98e80e46b 100644
--- a/sites/docs/src/lib/components/component-preview-v2.svelte
+++ b/sites/docs/src/lib/components/component-preview-v2.svelte
@@ -6,14 +6,15 @@
 	type Props = {
 		preview: Snippet;
 		children: Snippet;
+		class?: string;
 	};
 
-	let { preview, children }: Props = $props();
+	let { preview, children, class: className }: Props = $props();
 </script>
 
 <DemoContainer>
 	{@render preview()}
 </DemoContainer>
-<DemoCodeContainer>
+<DemoCodeContainer class={className}>
 	{@render children()}
 </DemoCodeContainer>
diff --git a/sites/docs/src/lib/components/demo-code-container.svelte b/sites/docs/src/lib/components/demo-code-container.svelte
index dcbff1fed..bba318dbf 100644
--- a/sites/docs/src/lib/components/demo-code-container.svelte
+++ b/sites/docs/src/lib/components/demo-code-container.svelte
@@ -8,8 +8,9 @@
 
 	type Props = {
 		children: Snippet;
+		class?: string;
 	};
-	let { children }: Props = $props();
+	let { children, class: className }: Props = $props();
 
 	const items = [
 		{
@@ -40,7 +41,8 @@
 					<div
 						class={cn(
 							"w-full [&_pre]:!my-0 [&_pre]:!mt-0 [&_pre]:max-h-[800px] [&_pre]:min-h-80 [&_pre]:overflow-auto [&_pre]:!rounded-none [&_pre]:!rounded-b-none [&_pre]:!rounded-tl-none [&_pre]:!rounded-tr-none [&_pre]:!border-t-0 [&_pre]:!border-none [&_pre]:!px-2 [&_pre]:!pb-5 [&_pre]:!pt-2",
-							!open && "[&_pre]:!max-h-80"
+							!open && "[&_pre]:!max-h-80",
+							className
 						)}
 					>
 						{#if item.value === "App.svelte"}
diff --git a/sites/docs/src/lib/components/demos/index.ts b/sites/docs/src/lib/components/demos/index.ts
index d18c97482..3aa1767a9 100644
--- a/sites/docs/src/lib/components/demos/index.ts
+++ b/sites/docs/src/lib/components/demos/index.ts
@@ -26,6 +26,9 @@ export { default as ProgressDemo } from "./progress-demo.svelte";
 export { default as RadioGroupDemo } from "./radio-group-demo.svelte";
 export { default as RangeCalendarDemo } from "./range-calendar-demo.svelte";
 export { default as ScrollAreaDemo } from "./scroll-area-demo.svelte";
+export { default as ScrollAreaDemoAlways } from "./scroll-area-demo-always.svelte";
+export { default as ScrollAreaDemoAuto } from "./scroll-area-demo-auto.svelte";
+export { default as ScrollAreaDemoScroll } from "./scroll-area-demo-scroll.svelte";
 export { default as SelectDemo } from "./select-demo.svelte";
 export { default as SeparatorDemo } from "./separator-demo.svelte";
 export { default as SliderDemo } from "./slider-demo.svelte";
diff --git a/sites/docs/src/lib/components/demos/scroll-area-demo-always.svelte b/sites/docs/src/lib/components/demos/scroll-area-demo-always.svelte
new file mode 100644
index 000000000..6e9dfcd6e
--- /dev/null
+++ b/sites/docs/src/lib/components/demos/scroll-area-demo-always.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { ScrollArea } from "bits-ui";
+</script>
+
+<ScrollArea.Root
+	class="relative overflow-hidden rounded-[10px] border border-dark-10 bg-background-alt px-4 py-4 shadow-card"
+	type="always"
+>
+	<ScrollArea.Viewport class="h-full max-h-[200px] w-full max-w-[200px]">
+		<h4 class="mb-4 mt-2 text-xl font-semibold leading-none tracking-[-0.01em] text-foreground">
+			Scroll Area
+		</h4>
+		<p class="text-wrap text-sm leading-5 text-foreground-alt">
+			Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos impedit rem,
+			repellat deserunt ducimus quasi nisi voluptatem cumque aliquid esse ea deleniti eveniet
+			incidunt! Deserunt minus laborum accusamus iusto dolorum. Lorem ipsum dolor sit, amet
+			consectetur adipisicing elit. Blanditiis officiis error minima eos fugit voluptate
+			excepturi eveniet dolore et, ratione impedit consequuntur dolorem hic quae corrupti
+			autem? Dolorem, sit voluptatum.
+		</p>
+	</ScrollArea.Viewport>
+	<ScrollArea.Scrollbar
+		orientation="vertical"
+		class="flex w-2.5 touch-none select-none rounded-full border-l border-l-transparent bg-muted p-px transition-all duration-200 hover:w-3 hover:bg-dark-10 data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out-0 data-[state=visible]:fade-in-0"
+	>
+		<ScrollArea.Thumb
+			class="flex-1 rounded-full bg-muted-foreground data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out-0 data-[state=visible]:fade-in-0"
+		/>
+	</ScrollArea.Scrollbar>
+	<ScrollArea.Scrollbar
+		orientation="horizontal"
+		class="flex h-2.5 touch-none select-none rounded-full border-t border-t-transparent bg-muted p-px transition-all duration-200 hover:h-3 hover:bg-dark-10 data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out-0 data-[state=visible]:fade-in-0"
+	>
+		<ScrollArea.Thumb
+			class="rounded-full bg-muted-foreground data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out-0 data-[state=visible]:fade-in-0"
+		/>
+	</ScrollArea.Scrollbar>
+	<ScrollArea.Corner />
+</ScrollArea.Root>
diff --git a/sites/docs/src/lib/components/demos/scroll-area-demo-auto.svelte b/sites/docs/src/lib/components/demos/scroll-area-demo-auto.svelte
new file mode 100644
index 000000000..511df2e41
--- /dev/null
+++ b/sites/docs/src/lib/components/demos/scroll-area-demo-auto.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { ScrollArea } from "bits-ui";
+</script>
+
+<ScrollArea.Root
+	class="relative overflow-hidden rounded-[10px] border border-dark-10 bg-background-alt px-4 py-4 shadow-card"
+	type="auto"
+>
+	<ScrollArea.Viewport class="h-full max-h-[200px] w-full max-w-[200px]">
+		<h4 class="mb-4 mt-2 text-xl font-semibold leading-none tracking-[-0.01em] text-foreground">
+			Scroll Area
+		</h4>
+		<p class="text-wrap text-sm leading-5 text-foreground-alt">
+			Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos impedit rem,
+			repellat deserunt ducimus quasi nisi voluptatem cumque aliquid esse ea deleniti eveniet
+			incidunt! Deserunt minus laborum accusamus iusto dolorum. Lorem ipsum dolor sit, amet
+			consectetur adipisicing elit. Blanditiis officiis error minima eos fugit voluptate
+			excepturi eveniet dolore et, ratione impedit consequuntur dolorem hic quae corrupti
+			autem? Dolorem, sit voluptatum.
+		</p>
+	</ScrollArea.Viewport>
+	<ScrollArea.Scrollbar
+		orientation="vertical"
+		class="flex w-2.5 touch-none select-none rounded-full border-l border-l-transparent bg-muted p-px transition-all duration-200 hover:w-3 hover:bg-dark-10 data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out-0 data-[state=visible]:fade-in-0"
+	>
+		<ScrollArea.Thumb
+			class="flex-1 rounded-full bg-muted-foreground data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out-0 data-[state=visible]:fade-in-0"
+		/>
+	</ScrollArea.Scrollbar>
+	<ScrollArea.Scrollbar
+		orientation="horizontal"
+		class="flex h-2.5 touch-none select-none rounded-full border-t border-t-transparent bg-muted p-px transition-all duration-200 hover:h-3 hover:bg-dark-10 data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out-0 data-[state=visible]:fade-in-0"
+	>
+		<ScrollArea.Thumb
+			class="rounded-full bg-muted-foreground data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out-0 data-[state=visible]:fade-in-0"
+		/>
+	</ScrollArea.Scrollbar>
+	<ScrollArea.Corner />
+</ScrollArea.Root>
diff --git a/sites/docs/src/lib/components/demos/scroll-area-demo-scroll.svelte b/sites/docs/src/lib/components/demos/scroll-area-demo-scroll.svelte
new file mode 100644
index 000000000..03d02413b
--- /dev/null
+++ b/sites/docs/src/lib/components/demos/scroll-area-demo-scroll.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { ScrollArea } from "bits-ui";
+</script>
+
+<ScrollArea.Root
+	class="relative overflow-hidden rounded-[10px] border border-dark-10 bg-background-alt px-4 py-4 shadow-card"
+	type="scroll"
+>
+	<ScrollArea.Viewport class="h-full max-h-[200px] w-full max-w-[200px]">
+		<h4 class="mb-4 mt-2 text-xl font-semibold leading-none tracking-[-0.01em] text-foreground">
+			Scroll Area
+		</h4>
+		<p class="text-wrap text-sm leading-5 text-foreground-alt">
+			Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos impedit rem,
+			repellat deserunt ducimus quasi nisi voluptatem cumque aliquid esse ea deleniti eveniet
+			incidunt! Deserunt minus laborum accusamus iusto dolorum. Lorem ipsum dolor sit, amet
+			consectetur adipisicing elit. Blanditiis officiis error minima eos fugit voluptate
+			excepturi eveniet dolore et, ratione impedit consequuntur dolorem hic quae corrupti
+			autem? Dolorem, sit voluptatum.
+		</p>
+	</ScrollArea.Viewport>
+	<ScrollArea.Scrollbar
+		orientation="vertical"
+		class="flex w-2.5 touch-none select-none rounded-full border-l border-l-transparent bg-muted p-px transition-all duration-200 hover:w-3 hover:bg-dark-10 data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out-0 data-[state=visible]:fade-in-0"
+	>
+		<ScrollArea.Thumb
+			class="flex-1 rounded-full bg-muted-foreground data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out-0 data-[state=visible]:fade-in-0"
+		/>
+	</ScrollArea.Scrollbar>
+	<ScrollArea.Scrollbar
+		orientation="horizontal"
+		class="flex h-2.5 touch-none select-none rounded-full border-t border-t-transparent bg-muted p-px transition-all duration-200 hover:h-3 hover:bg-dark-10 data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out-0 data-[state=visible]:fade-in-0"
+	>
+		<ScrollArea.Thumb
+			class="rounded-full bg-muted-foreground data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out-0 data-[state=visible]:fade-in-0"
+		/>
+	</ScrollArea.Scrollbar>
+	<ScrollArea.Corner />
+</ScrollArea.Root>
diff --git a/sites/docs/src/lib/components/demos/scroll-area-demo.svelte b/sites/docs/src/lib/components/demos/scroll-area-demo.svelte
index 22ccf8586..ff5fe9529 100644
--- a/sites/docs/src/lib/components/demos/scroll-area-demo.svelte
+++ b/sites/docs/src/lib/components/demos/scroll-area-demo.svelte
@@ -6,9 +6,7 @@
 	class="relative overflow-hidden rounded-[10px] border border-dark-10 bg-background-alt px-4 py-4 shadow-card"
 >
 	<ScrollArea.Viewport class="h-full max-h-[200px] w-full max-w-[200px]">
-		<h4
-			class="mb-4 mt-2 text-[20px] font-semibold leading-none tracking-[-0.01em] text-foreground"
-		>
+		<h4 class="mb-4 mt-2 text-xl font-semibold leading-none tracking-[-0.01em] text-foreground">
 			Scroll Area
 		</h4>
 		<p class="text-wrap text-sm leading-5 text-foreground-alt">
diff --git a/sites/docs/src/lib/components/index.ts b/sites/docs/src/lib/components/index.ts
index 9653abad6..1fb23ec59 100644
--- a/sites/docs/src/lib/components/index.ts
+++ b/sites/docs/src/lib/components/index.ts
@@ -15,3 +15,4 @@ export { default as ComponentPreview } from "./component-preview.svelte";
 export { default as LightSwitch } from "./light-switch.svelte";
 export { default as Metadata } from "./metadata.svelte";
 export { default as ComponentPreviewV2 } from "./component-preview-v2.svelte";
+export { default as ComponentPreviewMin } from "./component-preview-min.svelte";