diff --git a/docs/app/components/content/ComponentExample.vue b/docs/app/components/content/ComponentExample.vue
index 392edcf298..f6983b01c1 100644
--- a/docs/app/components/content/ComponentExample.vue
+++ b/docs/app/components/content/ComponentExample.vue
@@ -44,6 +44,7 @@ const props = withDefaults(defineProps<{
    * A list of variable props to link to the component.
    */
   options?: Array<{
+    type?: string
     alias?: string
     name: string
     label: string
@@ -195,6 +196,7 @@ const urlSearchParams = computed(() => {
             <UInput
               v-else
               :model-value="get(optionsValues, option.name)"
+              :type="option.type"
               color="neutral"
               variant="soft"
               :ui="{ base: 'rounded-sm rounded-l-none min-w-12' }"
diff --git a/docs/app/components/content/examples/scroll-area/ScrollAreaCustomExample.vue b/docs/app/components/content/examples/scroll-area/ScrollAreaCustomExample.vue
new file mode 100644
index 0000000000..de9237a8f4
--- /dev/null
+++ b/docs/app/components/content/examples/scroll-area/ScrollAreaCustomExample.vue
@@ -0,0 +1,28 @@
+<template>
+  <UScrollArea class="h-96 w-full border border-default rounded-lg">
+    <UCard>
+      <template #header>
+        <h3 class="font-semibold">
+          Section 1
+        </h3>
+      </template>
+      <p>Custom content without using the items prop.</p>
+    </UCard>
+    <UCard>
+      <template #header>
+        <h3 class="font-semibold">
+          Section 2
+        </h3>
+      </template>
+      <p>Any content can be placed here and it will be scrollable.</p>
+    </UCard>
+    <UCard>
+      <template #header>
+        <h3 class="font-semibold">
+          Section 3
+        </h3>
+      </template>
+      <p>You can mix different components and layouts as needed.</p>
+    </UCard>
+  </UScrollArea>
+</template>
diff --git a/docs/app/components/content/examples/scroll-area/ScrollAreaExample.vue b/docs/app/components/content/examples/scroll-area/ScrollAreaExample.vue
new file mode 100644
index 0000000000..fa8a47ad79
--- /dev/null
+++ b/docs/app/components/content/examples/scroll-area/ScrollAreaExample.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+defineProps<{
+  orientation?: 'vertical' | 'horizontal'
+  virtualize?: boolean
+  lanes?: number
+  gap?: number
+  padding?: number
+}>()
+
+const items = Array.from({ length: 50 }, (_, i) => ({
+  id: i + 1,
+  title: `Item ${i + 1}`,
+  description: `Description for item ${i + 1}`
+}))
+</script>
+
+<template>
+  <UScrollArea
+    v-slot="{ item }"
+    :items="items"
+    :orientation="orientation"
+    :virtualize="virtualize ? {
+      lanes: lanes && lanes > 1 ? lanes : undefined,
+      gap,
+      paddingStart: padding,
+      paddingEnd: padding
+    } : false"
+    class="h-96 w-full border border-default rounded-lg"
+  >
+    <UCard class="h-full overflow-hidden">
+      <template #header>
+        <h3 class="font-semibold">
+          {{ item.title }}
+        </h3>
+      </template>
+      <p class="text-sm text-muted">
+        {{ item.description }}
+      </p>
+    </UCard>
+  </UScrollArea>
+</template>
diff --git a/docs/app/components/content/examples/scroll-area/ScrollAreaInfiniteScrollExample.vue b/docs/app/components/content/examples/scroll-area/ScrollAreaInfiniteScrollExample.vue
new file mode 100644
index 0000000000..e0c615e055
--- /dev/null
+++ b/docs/app/components/content/examples/scroll-area/ScrollAreaInfiniteScrollExample.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { UButton } from '#components'
+
+type Recipe = {
+  id: number
+  name: string
+  image: string
+  difficulty: string
+  cuisine: string
+  rating: number
+  reviewCount: number
+  prepTimeMinutes: number
+  cookTimeMinutes: number
+}
+
+type RecipeResponse = {
+  recipes: Recipe[]
+  total: number
+  skip: number
+  limit: number
+}
+
+const skip = ref(0)
+const limit = 10
+
+const { data, status, execute } = await useFetch('https://dummyjson.com/recipes?limit=10&select=name,image,difficulty,cuisine,rating,reviewCount,prepTimeMinutes,cookTimeMinutes', {
+  key: 'scroll-area-recipes-infinite-scroll',
+  params: { skip, limit },
+  transform: (data?: RecipeResponse) => {
+    return data?.recipes
+  },
+  lazy: true,
+  immediate: false
+})
+
+const recipes = ref<Recipe[]>([])
+
+watch(data, () => {
+  if (data.value) {
+    recipes.value = [...recipes.value, ...data.value]
+  }
+})
+
+execute()
+
+function loadMore() {
+  if (status.value !== 'pending') {
+    skip.value += limit
+  }
+}
+</script>
+
+<template>
+  <UScrollArea
+    :items="recipes"
+    :virtualize="{
+      estimateSize: 120,
+      loadMoreThreshold: 5
+    }"
+    class="h-96 w-full"
+    @load-more="loadMore"
+  >
+    <template #default="{ item }">
+      <UPageCard :description="`${item.cuisine} • ${item.difficulty}`" orientation="horizontal" :ui="{ container: 'lg:flex flex-row' }">
+        <template #header>
+          <UUser
+            :name="item.name"
+            :description="`${item.prepTimeMinutes + item.cookTimeMinutes} min • ${item.reviewCount} reviews`"
+            :avatar="{ src: item.image, alt: item.name }"
+          />
+        </template>
+        <UButton color="neutral" variant="subtle" size="xl" class="fit-content justify-self-end">
+          <UIcon name="i-lucide-star" class="size-3" />
+          {{ item.rating }}
+        </UButton>
+      </UPageCard>
+    </template>
+  </UScrollArea>
+
+  <UIcon v-if="status === 'pending'" name="i-lucide-loader-circle" class="animate-spin size-5 absolute bottom-4 left-0 right-0 mx-auto" />
+</template>
diff --git a/docs/app/components/content/examples/scroll-area/ScrollAreaOrientationExample.vue b/docs/app/components/content/examples/scroll-area/ScrollAreaOrientationExample.vue
new file mode 100644
index 0000000000..643d794318
--- /dev/null
+++ b/docs/app/components/content/examples/scroll-area/ScrollAreaOrientationExample.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+defineProps<{
+  orientation?: 'vertical' | 'horizontal'
+}>()
+
+const items = Array.from({ length: 30 }, (_, i) => ({
+  id: i + 1,
+  title: `Item ${i + 1}`,
+  description: `Description for item ${i + 1}`
+}))
+</script>
+
+<template>
+  <UScrollArea
+    v-slot="{ item }"
+    :items="items"
+    :orientation="orientation"
+    :class="orientation === 'vertical' ? 'h-96 flex flex-col' : 'w-full'"
+    class="border border-default rounded-lg"
+  >
+    <UCard>
+      <template #header>
+        <h3 class="font-semibold">
+          {{ item.title }}
+        </h3>
+      </template>
+      <p class="text-sm text-muted">
+        {{ item.description }}
+      </p>
+    </UCard>
+  </UScrollArea>
+</template>
diff --git a/docs/app/components/content/examples/scroll-area/ScrollAreaScrollToExample.vue b/docs/app/components/content/examples/scroll-area/ScrollAreaScrollToExample.vue
new file mode 100644
index 0000000000..e3e9acfa95
--- /dev/null
+++ b/docs/app/components/content/examples/scroll-area/ScrollAreaScrollToExample.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+const props = defineProps<{
+  targetIndex?: number
+  itemCount?: number
+}>()
+
+const items = computed(() => Array.from({ length: props.itemCount || 1000 }, (_, i) => ({
+  id: i + 1,
+  title: `Item ${i + 1}`
+})))
+
+const scrollArea = useTemplateRef('scrollArea')
+
+function scrollToTop() {
+  scrollArea.value?.scrollToIndex(0, { align: 'start', behavior: 'smooth' })
+}
+
+function scrollToBottom() {
+  scrollArea.value?.scrollToIndex(items.value.length - 1, { align: 'end', behavior: 'smooth' })
+}
+
+function scrollToItem(index: number) {
+  scrollArea.value?.scrollToIndex(index - 1, { align: 'center', behavior: 'smooth' })
+}
+</script>
+
+<template>
+  <div class="space-y-4 w-full">
+    <UScrollArea
+      ref="scrollArea"
+      :items="items"
+      :virtualize="{ estimateSize: 58 }"
+      class="h-96 w-full border border-default rounded-lg p-4"
+    >
+      <template #default="{ item, index }">
+        <div
+          class="p-3 mb-2 rounded-lg border border-default"
+          :class="index === (targetIndex || 500) - 1 ? 'bg-primary-500/10 border-primary-500/20' : 'bg-elevated'"
+        >
+          <span class="font-medium">{{ item.title }}</span>
+        </div>
+      </template>
+    </UScrollArea>
+
+    <UFieldGroup size="sm">
+      <UButton icon="i-lucide-arrow-up-to-line" color="neutral" variant="outline" @click="scrollToTop">
+        Top
+      </UButton>
+      <UButton icon="i-lucide-arrow-down-to-line" color="neutral" variant="outline" @click="scrollToBottom">
+        Bottom
+      </UButton>
+      <UButton icon="i-lucide-navigation" color="neutral" variant="outline" @click="scrollToItem(targetIndex || 500)">
+        Go to {{ targetIndex || 500 }}
+      </UButton>
+    </UFieldGroup>
+  </div>
+</template>
diff --git a/docs/app/components/content/examples/scroll-area/ScrollAreaVariableHeightExample.vue b/docs/app/components/content/examples/scroll-area/ScrollAreaVariableHeightExample.vue
new file mode 100644
index 0000000000..f9411c631b
--- /dev/null
+++ b/docs/app/components/content/examples/scroll-area/ScrollAreaVariableHeightExample.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+const items = Array.from({ length: 100 }, (_, i) => ({
+  id: i + 1,
+  title: `Card ${i + 1}`,
+  description: i % 3 === 0
+    ? `This is a longer description with more text to demonstrate variable height handling in virtualized lists. Item ${i + 1} has significantly more content than others.`
+    : `Short description for item ${i + 1}.`
+}))
+</script>
+
+<template>
+  <UScrollArea
+    v-slot="{ item }"
+    :items="items"
+    :virtualize="{ estimateSize: 120, lanes: 3 }"
+    class="h-96 w-full border border-default rounded-lg"
+  >
+    <UCard>
+      <template #header>
+        <h3 class="font-semibold">
+          {{ item.title }}
+        </h3>
+      </template>
+      <p class="text-sm text-muted">
+        {{ item.description }}
+      </p>
+    </UCard>
+  </UScrollArea>
+</template>
diff --git a/docs/app/components/content/examples/scroll-area/ScrollAreaVirtualizeExample.vue b/docs/app/components/content/examples/scroll-area/ScrollAreaVirtualizeExample.vue
new file mode 100644
index 0000000000..309acb7033
--- /dev/null
+++ b/docs/app/components/content/examples/scroll-area/ScrollAreaVirtualizeExample.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+const props = defineProps<{
+  itemCount?: number
+}>()
+
+const items = computed(() => Array.from({ length: props.itemCount || 10000 }, (_, i) => ({
+  id: i + 1,
+  title: `Item ${i + 1}`,
+  description: `Description for item ${i + 1}`
+})))
+</script>
+
+<template>
+  <UScrollArea
+    v-slot="{ item }"
+    :items="items"
+    virtualize
+    class="h-96 w-full border border-default rounded-lg p-4"
+  >
+    <UCard class="mb-4">
+      <template #header>
+        <h3 class="font-semibold">
+          {{ item.title }}
+        </h3>
+      </template>
+      <p class="text-sm text-muted">
+        {{ item.description }}
+      </p>
+    </UCard>
+  </UScrollArea>
+</template>
diff --git a/docs/content/docs/2.components/scroll-area.md b/docs/content/docs/2.components/scroll-area.md
new file mode 100644
index 0000000000..93844b9646
--- /dev/null
+++ b/docs/content/docs/2.components/scroll-area.md
@@ -0,0 +1,268 @@
+---
+description: A flexible scroll container with virtualization support.
+category: layout
+links:
+  - label: TanStack Virtual
+    avatar:
+      src: https://github.com/tanstack.png
+    to: https://tanstack.com/virtual/latest
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/v4/src/runtime/components/ScrollArea.vue
+navigation.badge: Soon
+---
+
+## Usage
+
+The ScrollArea component creates scrollable containers with optional virtualization for large lists.
+
+::note
+When virtualization is **disabled**, spacing uses theme configuration. When **enabled**, spacing has sensible defaults (`gap: 16`, `paddingStart: 16`, `paddingEnd: 16`) matching the theme. Override via the `virtualize` prop as needed.
+::
+
+::component-example
+---
+collapse: true
+name: 'scroll-area-example'
+options:
+  - name: orientation
+    label: orientation
+    default: vertical
+    items:
+      - vertical
+      - horizontal
+  - name: virtualize
+    label: virtualize
+    default: true
+    items:
+      - true
+      - false
+  - name: lanes
+    type: number
+    label: lanes
+    default: 3
+    visibleWhen:
+      option: virtualize
+      is: true
+  - name: gap
+    type: number
+    label: gap
+    default: 16
+    visibleWhen:
+      option: virtualize
+      is: true
+  - name: padding
+    type: number
+    label: padding
+    default: 16
+    visibleWhen:
+      option: virtualize
+      is: true
+---
+::
+
+### Orientation
+
+Use the `orientation` prop to change the scroll direction. Defaults to `vertical`.
+
+::component-example
+---
+collapse: true
+name: 'scroll-area-orientation-example'
+options:
+  - name: orientation
+    label: orientation
+    default: vertical
+    items:
+      - vertical
+      - horizontal
+---
+::
+
+### Virtualization
+
+Use the `virtualize` prop to render only the items currently in view, significantly boosting performance when working with large datasets.
+
+::note
+Use virtualization for large lists (100+ items) or heavy components. Skip for small, simple lists (< 50 items).
+::
+
+::component-example
+---
+collapse: true
+name: 'scroll-area-virtualize-example'
+options:
+  - name: itemCount
+    label: itemCount
+    default: 10000
+---
+::
+
+## Examples
+
+### Masonry layouts
+
+Create masonry (waterfall) layouts with variable height items using `lanes`. Items are automatically measured and positioned as they render.
+
+::component-example
+---
+collapse: true
+name: 'scroll-area-variable-height-example'
+---
+::
+
+::note
+Provide an accurate `estimateSize` close to the average item height for better initial rendering performance. Increase `overscan` for smoother scrolling at the cost of rendering more off-screen items.
+::
+
+### Responsive lanes
+
+Implement responsive column/row counts using breakpoints or container width tracking.
+
+```vue
+<script setup lang="ts">
+const { width } = useWindowSize()
+
+const lanes = computed(() => {
+  if (width.value < 640) return 1
+  if (width.value < 1024) return 2
+  return 3
+})
+</script>
+
+<template>
+  <UScrollArea :items="items" :virtualize="{ lanes }">
+    <template #default="{ item }">
+      <!-- your item content -->
+    </template>
+  </UScrollArea>
+</template>
+```
+
+For container-based responsive behavior:
+
+```vue
+<script setup lang="ts">
+const scrollArea = ref()
+const { width } = useElementSize(scrollArea)
+
+const lanes = computed(() => {
+  // 2 lanes is the minimum, 6 lanes is the maximum, 300px is the goal width of each lane
+  return Math.max(2, Math.min(6, Math.floor(width.value / 300)))
+})
+</script>
+
+<template>
+  <UScrollArea ref="scrollArea" :items="items" :virtualize="{ lanes }">
+    <template #default="{ item }">{{ item }}</template>
+  </UScrollArea>
+</template>
+```
+
+::tip
+Use [`useWindowSize`](https://vueuse.org/core/useWindowSize/) for viewport-based or [`useElementSize`](https://vueuse.org/core/useElementSize/) for container-based responsive lanes.
+::
+
+### Programmatic scrolling
+
+Use the exposed methods to programmatically control scroll position (requires virtualization):
+
+::component-example
+---
+collapse: true
+name: 'scroll-area-scroll-to-example'
+options:
+  - name: itemCount
+    label: itemCount
+    default: 10000
+  - name: targetIndex
+    label: targetIndex
+    default: 500
+---
+::
+
+### Infinite scroll
+
+Use `@load-more` to load more data as the user scrolls (requires virtualization):
+
+::component-example
+---
+prettier: true
+collapse: true
+name: 'scroll-area-infinite-scroll-example'
+class: '!p-0'
+---
+::
+
+::tip
+The `@load-more` event fires when the user scrolls within `loadMoreThreshold` items from the end (default: 5). Use a loading flag to prevent multiple simultaneous requests and always use spread syntax (`[...items, ...newItems]`) for reactive updates.
+::
+
+### Custom content
+
+Use the default slot without `items` for custom scrollable content.
+
+::component-example
+---
+name: 'scroll-area-custom-example'
+class: 'p-8'
+---
+::
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Emits
+
+:component-emits
+
+### Expose
+
+You can access the typed component instance using [`useTemplateRef`](https://vuejs.org/api/composition-api-helpers.html#usetemplateref).
+
+```vue
+<script setup lang="ts">
+const scrollArea = useTemplateRef('scrollArea')
+
+// Scroll to a specific item
+function scrollToItem(index: number) {
+  scrollArea.value?.scrollToIndex(index, { align: 'center' })
+}
+</script>
+
+<template>
+  <UScrollArea ref="scrollArea" :items="items" virtualize />
+</template>
+```
+
+This will give you access to the following:
+
+| Name | Type | Description |
+| ---- | ---- | ----------- |
+| `virtualizer`{lang="ts-type"} | `ComputedRef<Virtualizer \| null>`{lang="ts-type"} | The TanStack Virtual virtualizer instance (null if virtualization is disabled) |
+| `scrollToOffset`{lang="ts-type"} | `(offset: number, options?: ScrollToOptions) => void`{lang="ts-type"} | Scroll to a specific pixel offset |
+| `scrollToIndex`{lang="ts-type"} | `(index: number, options?: ScrollToOptions) => void`{lang="ts-type"} | Scroll to a specific item index |
+| `getTotalSize`{lang="ts-type"} | `() => number`{lang="ts-type"} | Get the total size of all virtualized items in pixels |
+| `measure`{lang="ts-type"} | `() => void`{lang="ts-type"} | Reset all previously measured item sizes |
+| `getScrollOffset`{lang="ts-type"} | `() => number`{lang="ts-type"} | Get the current scroll offset in pixels |
+| `isScrolling`{lang="ts-type"} | `() => boolean`{lang="ts-type"} | Check if the list is currently being scrolled |
+| `getScrollDirection`{lang="ts-type"} | `() => 'forward' \| 'backward' \| null`{lang="ts-type"} | Get the current scroll direction |
+
+::warning
+Scroll methods are only available when virtualization is enabled. Calling them with `virtualize` set to `false` will result in a warning message.
+::
+
+## Theme
+
+:component-theme
+
+## Changelog
+
+:component-changelog
diff --git a/docs/public/components/dark/scroll-area.png b/docs/public/components/dark/scroll-area.png
new file mode 100644
index 0000000000..f79d2ebf39
Binary files /dev/null and b/docs/public/components/dark/scroll-area.png differ
diff --git a/docs/public/components/light/scroll-area.png b/docs/public/components/light/scroll-area.png
new file mode 100644
index 0000000000..996ab306f6
Binary files /dev/null and b/docs/public/components/light/scroll-area.png differ
diff --git a/playgrounds/nuxt/app/composables/useNavigation.ts b/playgrounds/nuxt/app/composables/useNavigation.ts
index 5398023167..08aa9940c1 100644
--- a/playgrounds/nuxt/app/composables/useNavigation.ts
+++ b/playgrounds/nuxt/app/composables/useNavigation.ts
@@ -63,6 +63,7 @@ const components = [
   'pricing-table',
   'progress',
   'radio-group',
+  'scroll-area',
   'select-menu',
   'select',
   'separator',
diff --git a/playgrounds/nuxt/app/pages/components/scroll-area.vue b/playgrounds/nuxt/app/pages/components/scroll-area.vue
new file mode 100644
index 0000000000..d557268a47
--- /dev/null
+++ b/playgrounds/nuxt/app/pages/components/scroll-area.vue
@@ -0,0 +1,176 @@
+<script setup lang="ts">
+const virtualize = ref(false)
+const orientation = ref<'vertical' | 'horizontal'>('vertical')
+const itemCount = ref(100)
+const estimateSize = ref(100)
+const gap = ref(12)
+const padding = ref(12)
+const lanes = ref(3)
+
+type Item = {
+  id: number
+  title: string
+  url?: string
+  description?: string
+  aspectRatio?: number
+  color?: string
+}
+
+// Generate items with variable sizes for dynamic sizing demo
+const items = computed<Item[]>(() => {
+  return Array.from({ length: itemCount.value }, (_, i) => {
+    const aspectRatios = ['1/1', '4/3', '16/9']
+    const descriptions = [
+      `Item ${i + 1}`,
+      `Item ${i + 1} with some additional text.`,
+      `This is item number ${i + 1} with quite a bit more description text that demonstrates dynamic sizing with variable height content in masonry layouts.`,
+      `Item ${i + 1} - short one.`
+    ]
+    return {
+      id: i + 1,
+      url: `https://picsum.photos/300/${aspectRatios[i % aspectRatios.length] === '1/1' ? 300 : aspectRatios[i % aspectRatios.length] === '4/3' ? 400 : 200}?random=${i}`,
+      title: `Image ${i + 1}`,
+      description: descriptions[i % descriptions.length],
+      aspectRatio: aspectRatios[i % aspectRatios.length] === '1/1' ? 1 : aspectRatios[i % aspectRatios.length] === '4/3' ? 4 / 3 : 16 / 9
+    }
+  })
+})
+
+// For virtualized mode, pass layout options (gap, padding, lanes)
+const virtualizeOptions = computed(() => {
+  if (!virtualize.value) {
+    return false
+  }
+  return {
+    estimateSize: estimateSize.value,
+    gap: gap.value,
+    paddingStart: padding.value,
+    paddingEnd: padding.value,
+    lanes: lanes.value,
+    enabled: true
+  }
+})
+</script>
+
+<template>
+  <Navbar>
+    <USwitch v-model="virtualize" label="Virtualize" reverse />
+
+    <UFieldGroup>
+      <UButton
+        color="neutral"
+        variant="outline"
+        active-variant="solid"
+        active-color="primary"
+        :active="orientation === 'vertical'"
+        icon="i-lucide-arrow-down"
+        @click="orientation = 'vertical'"
+      />
+      <UButton
+        color="neutral"
+        variant="outline"
+        active-variant="solid"
+        active-color="primary"
+        :active="orientation === 'horizontal'"
+        icon="i-lucide-arrow-right"
+        @click="orientation = 'horizontal'"
+      />
+    </UFieldGroup>
+
+    <UInput
+      v-model.number="itemCount"
+      type="number"
+      icon="i-lucide-image"
+      :min="10"
+      :max="100000"
+    />
+
+    <!-- <UInput
+        v-model.number="estimateSize"
+        type="number"
+        :min="20"
+        :max="500"
+        class="w-24"
+      /> -->
+
+    <template v-if="virtualize">
+      <UInput
+        v-model.number="gap"
+        type="number"
+        :min="0"
+        icon="i-lucide-between-vertical-start"
+        :max="50"
+      />
+
+      <UInput
+        v-model.number="padding"
+        type="number"
+        :min="0"
+        :max="200"
+        icon="i-lucide-square-dashed"
+      />
+
+      <UInput
+        v-model.number="lanes"
+        type="number"
+        :min="1"
+        icon="i-lucide-layout-dashboard"
+        :max="10"
+      />
+    </template>
+  </Navbar>
+
+  <UCard :ui="{ body: '!p-0 h-full' }" class="max-w-5xl w-full h-full">
+    <UScrollArea
+      :items="items"
+      :orientation="orientation"
+      :virtualize="virtualizeOptions"
+      class="size-full"
+      :ui="{ viewport: `${orientation === 'vertical' ? 'w-full' : 'h-full'}` }"
+    >
+      <template v-if="orientation === 'horizontal'" #default="{ item }">
+        <div class="grid grid-rows-[1fr_min-content] h-full w-max gap-2">
+          <div class="bg-elevated rounded-lg overflow-hidden h-full w-max">
+            <img
+              :src="item!.url"
+              :alt="item!.title"
+              class="h-full object-cover"
+              :style="{ aspectRatio: item!.aspectRatio?.toString() }"
+            >
+          </div>
+
+          <p class="text-sm text-center">
+            {{ item!.title }}
+          </p>
+        </div>
+      </template>
+
+      <template v-else #default="{ item, index }">
+        <UCard
+          :ui="{
+            root: `bg-${item!.color || 'blue'}-500/10 border-${item!.color || 'blue'}-500/20`,
+            body: 'p-0 sm:p-0'
+          }"
+        >
+          <template #header>
+            <div class="flex items-center justify-between">
+              <h3 class="font-semibold">
+                {{ item!.title }}
+              </h3>
+              <span class="text-xs text-muted">
+                #{{ index }}
+              </span>
+            </div>
+          </template>
+          <div class="bg-elevated overflow-hidden h-full">
+            <img
+              :src="item!.url"
+              :alt="item!.title"
+              class="w-full h-full object-cover"
+            >
+          </div>
+        </UCard>
+      </template>
+    </UScrollArea>
+  </UCard>
+</template>
diff --git a/src/runtime/components/ScrollArea.vue b/src/runtime/components/ScrollArea.vue
new file mode 100644
index 0000000000..e2a03058a1
--- /dev/null
+++ b/src/runtime/components/ScrollArea.vue
@@ -0,0 +1,359 @@
+<script lang="ts">
+import type { ComponentPublicInstance, CSSProperties } from 'vue'
+import type { AppConfig } from '@nuxt/schema'
+import type { VirtualItem, VirtualizerOptions } from '@tanstack/vue-virtual'
+import theme from '#build/ui/scroll-area'
+import type { ComponentConfig } from '../types/tv'
+
+type ScrollArea = ComponentConfig<typeof theme, AppConfig, 'scrollArea'>
+
+export interface ScrollAreaVirtualizeOptions extends Partial<Omit<
+  VirtualizerOptions<Element, Element>,
+  'count' | 'getScrollElement' | 'horizontal' | 'enabled' | 'isRtl' | 'estimateSize' | 'lanes'
+>> {
+  /**
+   * Enable or disable virtualization while still applying layout options.
+   * @defaultValue true
+   */
+  enabled?: boolean
+  /**
+   * Estimated size (in px) of each item along the scroll axis. Can be a number or a function.
+   * @defaultValue 100
+   */
+  estimateSize?: number | ((index: number) => number)
+  /**
+   * Number of lanes or target lane size for multi-column layouts.
+   * - Number (e.g., 3): fixed number of columns/rows
+   * - String (e.g., '300px'): responsive columns based on item width
+   * @defaultValue undefined
+   */
+  lanes?: number | string
+  /**
+   * Number of items from the end to trigger loadMore event (for infinite scroll)
+   * @defaultValue 5
+   */
+  loadMoreThreshold?: number
+}
+
+export type ScrollAreaItem = any
+
+export interface ScrollAreaProps<T extends ScrollAreaItem = ScrollAreaItem> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  /**
+   * The scroll direction.
+   * @defaultValue 'vertical'
+   */
+  orientation?: 'vertical' | 'horizontal'
+  /**
+   * Array of items to render.
+   */
+  items?: T[]
+  /**
+   * Enable virtualization for large lists.
+   * @see https://tanstack.com/virtual/latest/docs/api/virtualizer#options
+   * @defaultValue false
+   */
+  virtualize?: boolean | ScrollAreaVirtualizeOptions
+  class?: any
+  ui?: ScrollArea['slots']
+}
+
+export interface ScrollAreaSlots<T extends ScrollAreaItem = ScrollAreaItem> {
+  default(
+    props:
+      | { item: T, index: number, virtualItem?: VirtualItem }
+      | Record<string, never>,
+  ): any
+}
+
+export interface ScrollAreaEmits {
+  /**
+   * Emitted when scroll state changes
+   * @param isScrolling - Whether the list is currently being scrolled
+   */
+  scroll: [isScrolling: boolean]
+  /**
+   * Emitted when user scrolls near the end of the list (for infinite scroll)
+   * @param lastIndex - The index of the last visible item
+   */
+  loadMore: [lastIndex: number]
+}
+</script>
+
+<script setup lang="ts" generic="T extends ScrollAreaItem">
+import { computed, toRef, useTemplateRef, watch } from 'vue'
+import { Primitive } from 'reka-ui'
+import { defu } from 'defu'
+import { useVirtualizer } from '@tanstack/vue-virtual'
+import { useAppConfig } from '#imports'
+import { tv } from '../utils/tv'
+import { useLocale } from '../composables/useLocale'
+
+const props = withDefaults(defineProps<ScrollAreaProps<T>>(), {
+  orientation: 'vertical',
+  virtualize: false
+})
+defineSlots<ScrollAreaSlots<T>>()
+const emits = defineEmits<ScrollAreaEmits>()
+
+const { dir } = useLocale()
+const appConfig = useAppConfig() as ScrollArea['AppConfig']
+
+const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.scrollArea || {}) })({
+  orientation: props.orientation
+}))
+
+const rootRef = useTemplateRef<ComponentPublicInstance>('rootRef')
+
+const isRtl = computed(() => dir.value === 'rtl')
+const isHorizontal = computed(() => props.orientation === 'horizontal')
+const isVertical = computed(() => !isHorizontal.value)
+const isVirtualizerEnabled = computed(() => {
+  if (!props.virtualize) {
+    return false
+  }
+  if (typeof props.virtualize === 'boolean') {
+    return props.virtualize
+  }
+  return props.virtualize.enabled !== false
+})
+
+const virtualizerProps = toRef(() => {
+  const options = typeof props.virtualize === 'boolean' ? {} : props.virtualize
+
+  return defu(options, {
+    estimateSize: 100,
+    overscan: 12,
+    gap: 16,
+    paddingStart: 16,
+    paddingEnd: 16,
+    scrollMargin: 0,
+    loadMoreThreshold: 5
+  })
+})
+
+const lanes = computed(() => {
+  const value = virtualizerProps.value.lanes
+  return typeof value === 'number' ? value : undefined
+})
+
+const virtualizer = useVirtualizer({
+  get enabled() {
+    return isVirtualizerEnabled.value
+  },
+  get overscan() {
+    return virtualizerProps.value.overscan
+  },
+  get gap() {
+    return virtualizerProps.value.gap
+  },
+  get paddingStart() {
+    return virtualizerProps.value.paddingStart
+  },
+  get paddingEnd() {
+    return virtualizerProps.value.paddingEnd
+  },
+  get scrollMargin() {
+    return virtualizerProps.value.scrollMargin
+  },
+  get lanes() {
+    return lanes.value
+  },
+  getItemKey: virtualizerProps.value.getItemKey,
+  get isRtl() {
+    return isRtl.value
+  },
+  get count() {
+    return props.items?.length || 0
+  },
+  getScrollElement: (): Element | null => rootRef.value?.$el || null,
+  get horizontal() {
+    return isHorizontal.value
+  },
+  estimateSize: typeof virtualizerProps.value.estimateSize === 'function'
+    ? virtualizerProps.value.estimateSize
+    : () => virtualizerProps.value.estimateSize as number
+})
+
+const virtualItems = computed<VirtualItem[]>(() => isVirtualizerEnabled.value ? virtualizer.value.getVirtualItems() : [])
+const totalSize = computed(() => isVirtualizerEnabled.value ? virtualizer.value.getTotalSize() : 0)
+
+const virtualRootStyle = computed<CSSProperties>(() => {
+  const gap = virtualizerProps.value.gap ?? 0
+  const halfGap = gap ? `${gap / 2}px` : undefined
+
+  return isHorizontal.value
+    ? { paddingBlock: halfGap }
+    : { paddingInline: halfGap }
+})
+
+const virtualViewportStyle = computed<CSSProperties>(() => ({
+  position: 'relative',
+  inlineSize: isHorizontal.value ? `${totalSize.value}px` : '100%',
+  blockSize: isVertical.value ? `${totalSize.value}px` : '100%'
+}))
+
+function getVirtualItemStyle(virtualItem: VirtualItem): CSSProperties {
+  const hasLanes = lanes.value !== undefined && lanes.value > 1
+  const laneSize = lanes.value ? 100 / lanes.value : 100
+  const lane = virtualItem.lane
+  const gap = virtualizerProps.value.gap ?? 0
+  const halfGap = gap ? `${gap / 2}px` : undefined
+
+  return {
+    position: 'absolute',
+    insetBlockStart: isHorizontal.value && hasLanes && lane !== undefined
+      ? `${(lane * 100) / lanes.value!}%`
+      : 0,
+    insetInlineStart: isVertical.value && hasLanes && lane !== undefined
+      ? `${(lane * 100) / lanes.value!}%`
+      : 0,
+    blockSize: isHorizontal.value && hasLanes && lane !== undefined
+      ? `${laneSize}%`
+      : isHorizontal.value ? '100%' : undefined,
+    inlineSize: isVertical.value && hasLanes && lane !== undefined
+      ? `${laneSize}%`
+      : isVertical.value ? '100%' : undefined,
+    paddingBlock: isHorizontal.value ? halfGap : undefined,
+    paddingInline: isVertical.value ? halfGap : undefined,
+    transform: isHorizontal.value
+      ? `translateX(${isRtl.value ? -virtualItem.start : virtualItem.start}px)`
+      : `translateY(${virtualItem.start}px)`
+  }
+}
+
+// Remeasure when lanes change
+watch(lanes, () => {
+  if (isVirtualizerEnabled.value) {
+    virtualizer.value.measure()
+  }
+}, { flush: 'sync' })
+
+function measureElement(el: Element | ComponentPublicInstance | null) {
+  if (el && isVirtualizerEnabled.value) {
+    const element = el instanceof Element ? el : (el as ComponentPublicInstance).$el as Element
+    virtualizer.value.measureElement(element)
+  }
+}
+
+// Emit scroll state changes
+watch(
+  () => (isVirtualizerEnabled.value ? virtualizer.value.isScrolling : false),
+  isScrolling => emits('scroll', isScrolling)
+)
+
+// Emit loadMore when scrolling near the end (infinite scroll support)
+watch(
+  () => {
+    if (!isVirtualizerEnabled.value) return -1
+    const items = virtualizer.value.getVirtualItems()
+    return items.length > 0 ? items[items.length - 1]?.index ?? -1 : -1
+  },
+  (lastVisibleIndex) => {
+    if (lastVisibleIndex === -1 || !props.items?.length) return
+
+    const threshold = virtualizerProps.value.loadMoreThreshold ?? 5
+    if (lastVisibleIndex >= props.items.length - threshold) {
+      emits('loadMore', lastVisibleIndex)
+    }
+  }
+)
+
+type ScrollToOptions = { align?: 'start' | 'center' | 'end' | 'auto', behavior?: 'auto' | 'smooth' | 'instant' }
+
+function requireVirtualization(method: string) {
+  if (!isVirtualizerEnabled.value) {
+    console.warn(`${method} requires virtualization to be enabled`)
+    return false
+  }
+  return true
+}
+
+defineExpose({
+  virtualizer: computed(() => isVirtualizerEnabled.value ? virtualizer.value : null),
+  scrollToOffset(offset: number, options?: ScrollToOptions) {
+    if (requireVirtualization('scrollToOffset')) {
+      virtualizer.value.scrollToOffset(offset, options as any)
+    }
+  },
+  scrollToIndex(index: number, options?: ScrollToOptions) {
+    if (requireVirtualization('scrollToIndex')) {
+      virtualizer.value.scrollToIndex(index, options as any)
+    }
+  },
+  getTotalSize() {
+    return requireVirtualization('getTotalSize') ? virtualizer.value.getTotalSize() : 0
+  },
+  measure() {
+    if (requireVirtualization('measure')) {
+      virtualizer.value.measure()
+    }
+  },
+  getScrollOffset() {
+    return isVirtualizerEnabled.value ? virtualizer.value.scrollOffset ?? 0 : 0
+  },
+  isScrolling() {
+    return isVirtualizerEnabled.value ? virtualizer.value.isScrolling : false
+  },
+  getScrollDirection() {
+    return isVirtualizerEnabled.value ? virtualizer.value.scrollDirection ?? null : null
+  }
+})
+</script>
+
+<template>
+  <Primitive
+    ref="rootRef"
+    :as="as"
+    data-slot="root"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    :style="isVirtualizerEnabled ? virtualRootStyle : undefined"
+  >
+    <template v-if="isVirtualizerEnabled">
+      <div
+        data-slot="viewport"
+        :class="ui.viewport({ class: props.ui?.viewport })"
+        :style="virtualViewportStyle"
+      >
+        <div
+          v-for="virtualItem in virtualItems"
+          :key="String(virtualItem.key)"
+          :ref="measureElement"
+          :data-index="virtualItem.index"
+          data-slot="item"
+          :class="ui.item({ class: props.ui?.item })"
+          :style="getVirtualItemStyle(virtualItem)"
+        >
+          <slot
+            :item="(items?.[virtualItem.index] as T)"
+            :index="virtualItem.index"
+            :virtual-item="virtualItem"
+          />
+        </div>
+      </div>
+    </template>
+
+    <template v-else>
+      <div data-slot="viewport" :class="ui.viewport({ class: props.ui?.viewport })">
+        <template v-if="items?.length">
+          <div
+            v-for="(item, index) in items"
+            :key="index"
+            data-slot="item"
+            :class="ui.item({ class: props.ui?.item })"
+          >
+            <slot :item="item" :index="index" />
+          </div>
+        </template>
+
+        <template v-else>
+          <slot />
+        </template>
+      </div>
+    </template>
+  </Primitive>
+</template>
diff --git a/src/runtime/components/Table.vue b/src/runtime/components/Table.vue
index 4b8d5959e6..084f99cf08 100644
--- a/src/runtime/components/Table.vue
+++ b/src/runtime/components/Table.vue
@@ -96,6 +96,7 @@ export interface TableProps<T extends TableData = TableData> extends TableOption
   /**
    * Enable virtualization for large datasets.
    * Note: when enabled, the divider between rows and sticky properties are not supported.
+   * @see https://tanstack.com/virtual/latest/docs/api/virtualizer#options
    * @defaultValue false
    */
   virtualize?: boolean | (Partial<Omit<VirtualizerOptions<Element, Element>, 'getScrollElement' | 'count' | 'estimateSize' | 'overscan'>> & {
diff --git a/src/runtime/types/index.ts b/src/runtime/types/index.ts
index 9efa713385..b0e529b615 100644
--- a/src/runtime/types/index.ts
+++ b/src/runtime/types/index.ts
@@ -85,6 +85,7 @@ export * from '../components/PricingPlans.vue'
 export * from '../components/PricingTable.vue'
 export * from '../components/Progress.vue'
 export * from '../components/RadioGroup.vue'
+export * from '../components/ScrollArea.vue'
 export * from '../components/Select.vue'
 export * from '../components/SelectMenu.vue'
 export * from '../components/Separator.vue'
diff --git a/src/theme/index.ts b/src/theme/index.ts
index aa4bdc8969..5fc269919f 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -83,6 +83,7 @@ export { default as pricingPlans } from './pricing-plans'
 export { default as pricingTable } from './pricing-table'
 export { default as progress } from './progress'
 export { default as radioGroup } from './radio-group'
+export { default as scrollArea } from './scroll-area'
 export { default as select } from './select'
 export { default as selectMenu } from './select-menu'
 export { default as separator } from './separator'
diff --git a/src/theme/scroll-area.ts b/src/theme/scroll-area.ts
new file mode 100644
index 0000000000..d330ada10f
--- /dev/null
+++ b/src/theme/scroll-area.ts
@@ -0,0 +1,21 @@
+export default {
+  slots: {
+    root: 'relative',
+    viewport: 'relative flex gap-4 p-4',
+    item: ''
+  },
+  variants: {
+    orientation: {
+      vertical: {
+        root: 'overflow-y-auto overflow-x-hidden',
+        viewport: 'columns-xs flex-col',
+        item: ''
+      },
+      horizontal: {
+        root: 'overflow-x-auto overflow-y-hidden',
+        viewport: 'flex-row',
+        item: 'w-max'
+      }
+    }
+  }
+}
diff --git a/test/components/ScrollArea.spec.ts b/test/components/ScrollArea.spec.ts
new file mode 100644
index 0000000000..0ef9ed1fda
--- /dev/null
+++ b/test/components/ScrollArea.spec.ts
@@ -0,0 +1,38 @@
+import { describe, it, expect } from 'vitest'
+import ScrollArea from '../../src/runtime/components/ScrollArea.vue'
+import type { ScrollAreaProps, ScrollAreaSlots } from '../../src/runtime/components/ScrollArea.vue'
+import ComponentRender from '../component-render'
+
+describe('ScrollArea', () => {
+  const testItems = [
+    { id: 1, name: 'Item 1' },
+    { id: 2, name: 'Item 2' },
+    { id: 3, name: 'Item 3' }
+  ]
+
+  it.each([
+    // Basic Props
+    ['with as', { props: { as: 'section' } }],
+    ['with class', { props: { class: 'custom-class' } }],
+    ['with ui', { props: { ui: { root: 'custom-root' } } }],
+    ['with items', { props: { items: testItems } }],
+    ['with orientation vertical', { props: { orientation: 'vertical' as const } }],
+    ['with orientation horizontal', { props: { orientation: 'horizontal' as const } }],
+
+    // Virtualization
+    ['with virtualize boolean', { props: { items: testItems, virtualize: true } }],
+    ['with virtualize object', { props: { items: testItems, virtualize: { overscan: 5, estimateSize: 50 } } }],
+    ['with virtualize gap', { props: { items: testItems, virtualize: { gap: 10 } } }],
+    ['with virtualize padding', { props: { items: testItems, virtualize: { paddingStart: 20, paddingEnd: 20 } } }],
+    ['with virtualize lanes', { props: { items: testItems, virtualize: { lanes: 3 } } }],
+    ['with virtualize scrollMargin', { props: { items: testItems, virtualize: { scrollMargin: 10 } } }],
+    ['with virtualize loadMoreThreshold', { props: { items: testItems, virtualize: { loadMoreThreshold: 10 } } }],
+    ['with virtualize enabled false', { props: { items: testItems, virtualize: { enabled: false } } }],
+
+    // Slots
+    ['with default slot', { slots: { default: () => 'Default slot' } }]
+  ])('renders %s correctly', async (nameOrHtml: string, options: { props?: ScrollAreaProps<any>, slots?: Partial<ScrollAreaSlots<any>> }) => {
+    const html = await ComponentRender(nameOrHtml, options, ScrollArea)
+    expect(html).toMatchSnapshot()
+  })
+})
diff --git a/test/components/__snapshots__/ScrollArea-vue.spec.ts.snap b/test/components/__snapshots__/ScrollArea-vue.spec.ts.snap
new file mode 100644
index 0000000000..ca7d9971f2
--- /dev/null
+++ b/test/components/__snapshots__/ScrollArea-vue.spec.ts.snap
@@ -0,0 +1,99 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ScrollArea > renders with as correctly 1`] = `
+"<section data-slot="root" class="relative overflow-y-auto overflow-x-hidden">
+  <div data-slot="viewport" class="relative flex gap-4 p-4 columns-xs flex-col"></div>
+</section>"
+`;
+
+exports[`ScrollArea > renders with class correctly 1`] = `
+"<div data-slot="root" class="relative overflow-y-auto overflow-x-hidden custom-class">
+  <div data-slot="viewport" class="relative flex gap-4 p-4 columns-xs flex-col"></div>
+</div>"
+`;
+
+exports[`ScrollArea > renders with default slot correctly 1`] = `
+"<div data-slot="root" class="relative overflow-y-auto overflow-x-hidden">
+  <div data-slot="viewport" class="relative flex gap-4 p-4 columns-xs flex-col">Default slot</div>
+</div>"
+`;
+
+exports[`ScrollArea > renders with items correctly 1`] = `
+"<div data-slot="root" class="relative overflow-y-auto overflow-x-hidden">
+  <div data-slot="viewport" class="relative flex gap-4 p-4 columns-xs flex-col">
+    <div data-slot="item" class=""></div>
+    <div data-slot="item" class=""></div>
+    <div data-slot="item" class=""></div>
+  </div>
+</div>"
+`;
+
+exports[`ScrollArea > renders with orientation horizontal correctly 1`] = `
+"<div data-slot="root" class="relative overflow-x-auto overflow-y-hidden">
+  <div data-slot="viewport" class="relative flex gap-4 p-4 flex-row"></div>
+</div>"
+`;
+
+exports[`ScrollArea > renders with orientation vertical correctly 1`] = `
+"<div data-slot="root" class="relative overflow-y-auto overflow-x-hidden">
+  <div data-slot="viewport" class="relative flex gap-4 p-4 columns-xs flex-col"></div>
+</div>"
+`;
+
+exports[`ScrollArea > renders with ui correctly 1`] = `
+"<div data-slot="root" class="relative overflow-y-auto overflow-x-hidden custom-root">
+  <div data-slot="viewport" class="relative flex gap-4 p-4 columns-xs flex-col"></div>
+</div>"
+`;
+
+exports[`ScrollArea > renders with virtualize boolean correctly 1`] = `
+"<div data-slot="root" class="relative overflow-y-auto overflow-x-hidden">
+  <div data-slot="viewport" class="relative flex gap-4 p-4 columns-xs flex-col" style="position: relative; inline-size: 100%; block-size: 364px;"></div>
+</div>"
+`;
+
+exports[`ScrollArea > renders with virtualize enabled false correctly 1`] = `
+"<div data-slot="root" class="relative overflow-y-auto overflow-x-hidden">
+  <div data-slot="viewport" class="relative flex gap-4 p-4 columns-xs flex-col">
+    <div data-slot="item" class=""></div>
+    <div data-slot="item" class=""></div>
+    <div data-slot="item" class=""></div>
+  </div>
+</div>"
+`;
+
+exports[`ScrollArea > renders with virtualize gap correctly 1`] = `
+"<div data-slot="root" class="relative overflow-y-auto overflow-x-hidden">
+  <div data-slot="viewport" class="relative flex gap-4 p-4 columns-xs flex-col" style="position: relative; inline-size: 100%; block-size: 352px;"></div>
+</div>"
+`;
+
+exports[`ScrollArea > renders with virtualize lanes correctly 1`] = `
+"<div data-slot="root" class="relative overflow-y-auto overflow-x-hidden">
+  <div data-slot="viewport" class="relative flex gap-4 p-4 columns-xs flex-col" style="position: relative; inline-size: 100%; block-size: 132px;"></div>
+</div>"
+`;
+
+exports[`ScrollArea > renders with virtualize loadMoreThreshold correctly 1`] = `
+"<div data-slot="root" class="relative overflow-y-auto overflow-x-hidden">
+  <div data-slot="viewport" class="relative flex gap-4 p-4 columns-xs flex-col" style="position: relative; inline-size: 100%; block-size: 364px;"></div>
+</div>"
+`;
+
+exports[`ScrollArea > renders with virtualize object correctly 1`] = `
+"<div data-slot="root" class="relative overflow-y-auto overflow-x-hidden">
+  <div data-slot="viewport" class="relative flex gap-4 p-4 columns-xs flex-col" style="position: relative; inline-size: 100%; block-size: 214px;"></div>
+</div>"
+`;
+
+exports[`ScrollArea > renders with virtualize padding correctly 1`] = `
+"<div data-slot="root" class="relative overflow-y-auto overflow-x-hidden">
+  <div data-slot="viewport" class="relative flex gap-4 p-4 columns-xs flex-col" style="position: relative; inline-size: 100%; block-size: 372px;"></div>
+</div>"
+`;
+
+exports[`ScrollArea > renders with virtualize scrollMargin correctly 1`] = `
+"<div data-slot="root" class="relative overflow-y-auto overflow-x-hidden">
+  <div data-slot="viewport" class="relative flex gap-4 p-4 columns-xs flex-col" style="position: relative; inline-size: 100%; block-size: 364px;"></div>
+</div>"
+`;
diff --git a/test/components/__snapshots__/ScrollArea.spec.ts.snap b/test/components/__snapshots__/ScrollArea.spec.ts.snap
new file mode 100644
index 0000000000..ca7d9971f2
--- /dev/null
+++ b/test/components/__snapshots__/ScrollArea.spec.ts.snap
@@ -0,0 +1,99 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ScrollArea > renders with as correctly 1`] = `
+"<section data-slot="root" class="relative overflow-y-auto overflow-x-hidden">
+  <div data-slot="viewport" class="relative flex gap-4 p-4 columns-xs flex-col"></div>
+</section>"
+`;
+
+exports[`ScrollArea > renders with class correctly 1`] = `
+"<div data-slot="root" class="relative overflow-y-auto overflow-x-hidden custom-class">
+  <div data-slot="viewport" class="relative flex gap-4 p-4 columns-xs flex-col"></div>
+</div>"
+`;
+
+exports[`ScrollArea > renders with default slot correctly 1`] = `
+"<div data-slot="root" class="relative overflow-y-auto overflow-x-hidden">
+  <div data-slot="viewport" class="relative flex gap-4 p-4 columns-xs flex-col">Default slot</div>
+</div>"
+`;
+
+exports[`ScrollArea > renders with items correctly 1`] = `
+"<div data-slot="root" class="relative overflow-y-auto overflow-x-hidden">
+  <div data-slot="viewport" class="relative flex gap-4 p-4 columns-xs flex-col">
+    <div data-slot="item" class=""></div>
+    <div data-slot="item" class=""></div>
+    <div data-slot="item" class=""></div>
+  </div>
+</div>"
+`;
+
+exports[`ScrollArea > renders with orientation horizontal correctly 1`] = `
+"<div data-slot="root" class="relative overflow-x-auto overflow-y-hidden">
+  <div data-slot="viewport" class="relative flex gap-4 p-4 flex-row"></div>
+</div>"
+`;
+
+exports[`ScrollArea > renders with orientation vertical correctly 1`] = `
+"<div data-slot="root" class="relative overflow-y-auto overflow-x-hidden">
+  <div data-slot="viewport" class="relative flex gap-4 p-4 columns-xs flex-col"></div>
+</div>"
+`;
+
+exports[`ScrollArea > renders with ui correctly 1`] = `
+"<div data-slot="root" class="relative overflow-y-auto overflow-x-hidden custom-root">
+  <div data-slot="viewport" class="relative flex gap-4 p-4 columns-xs flex-col"></div>
+</div>"
+`;
+
+exports[`ScrollArea > renders with virtualize boolean correctly 1`] = `
+"<div data-slot="root" class="relative overflow-y-auto overflow-x-hidden">
+  <div data-slot="viewport" class="relative flex gap-4 p-4 columns-xs flex-col" style="position: relative; inline-size: 100%; block-size: 364px;"></div>
+</div>"
+`;
+
+exports[`ScrollArea > renders with virtualize enabled false correctly 1`] = `
+"<div data-slot="root" class="relative overflow-y-auto overflow-x-hidden">
+  <div data-slot="viewport" class="relative flex gap-4 p-4 columns-xs flex-col">
+    <div data-slot="item" class=""></div>
+    <div data-slot="item" class=""></div>
+    <div data-slot="item" class=""></div>
+  </div>
+</div>"
+`;
+
+exports[`ScrollArea > renders with virtualize gap correctly 1`] = `
+"<div data-slot="root" class="relative overflow-y-auto overflow-x-hidden">
+  <div data-slot="viewport" class="relative flex gap-4 p-4 columns-xs flex-col" style="position: relative; inline-size: 100%; block-size: 352px;"></div>
+</div>"
+`;
+
+exports[`ScrollArea > renders with virtualize lanes correctly 1`] = `
+"<div data-slot="root" class="relative overflow-y-auto overflow-x-hidden">
+  <div data-slot="viewport" class="relative flex gap-4 p-4 columns-xs flex-col" style="position: relative; inline-size: 100%; block-size: 132px;"></div>
+</div>"
+`;
+
+exports[`ScrollArea > renders with virtualize loadMoreThreshold correctly 1`] = `
+"<div data-slot="root" class="relative overflow-y-auto overflow-x-hidden">
+  <div data-slot="viewport" class="relative flex gap-4 p-4 columns-xs flex-col" style="position: relative; inline-size: 100%; block-size: 364px;"></div>
+</div>"
+`;
+
+exports[`ScrollArea > renders with virtualize object correctly 1`] = `
+"<div data-slot="root" class="relative overflow-y-auto overflow-x-hidden">
+  <div data-slot="viewport" class="relative flex gap-4 p-4 columns-xs flex-col" style="position: relative; inline-size: 100%; block-size: 214px;"></div>
+</div>"
+`;
+
+exports[`ScrollArea > renders with virtualize padding correctly 1`] = `
+"<div data-slot="root" class="relative overflow-y-auto overflow-x-hidden">
+  <div data-slot="viewport" class="relative flex gap-4 p-4 columns-xs flex-col" style="position: relative; inline-size: 100%; block-size: 372px;"></div>
+</div>"
+`;
+
+exports[`ScrollArea > renders with virtualize scrollMargin correctly 1`] = `
+"<div data-slot="root" class="relative overflow-y-auto overflow-x-hidden">
+  <div data-slot="viewport" class="relative flex gap-4 p-4 columns-xs flex-col" style="position: relative; inline-size: 100%; block-size: 364px;"></div>
+</div>"
+`;