Scrollarea

Installation

Complete project setup first. Your configuration must select vue/reka and include your Design System ID.

pnpm exec frontfriend download scroll-area -f vue --primitive reka

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

<script setup lang="ts">
import { ScrollArea } from "@/components/ui/scroll-area";
import * as UI from "@/components/ui/scroll-area";

const Component = UI.ScrollArea;

const args = {
  "height": 240,
} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <ScrollArea :style="{ height: args.height + 'px', width: '300px' }"
    ><p v-for="i in 30" :key="i" class="p-3">
      Scrollable item {{ i }}
    </p></ScrollArea
  >
</template>

No component-specific props are declared in registry metadata; inherited HTML/Radix/Reka props are supported by the component implementation.

Subcomponents

• ScrollBar

ScrollArea renders its own ScrollAreaViewport, ScrollBar and corner internally, so content goes directly into its slot — nesting another viewport inside prevents the scroll from engaging. Add a ScrollBar orientation="horizontal" as a sibling of the content when scrolling sideways.

Subcomponents

• ScrollArea
• ScrollAreaThumb
• ScrollAreaViewport
• ScrollBar

Examples

Default

<script setup lang="ts">
import { ScrollArea } from "@/components/ui/scroll-area";
import { Separator } from "@/components/ui/separator";
import * as UI from "@/components/ui/scroll-area";

const tags = Array.from({ length: 50 }).map(
  (_, i, a) => `v1.2.0-beta.${a.length - i}`,
);

const Component = UI.ScrollArea;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <ScrollArea
    v-bind="args"
    class="h-72 w-48 rounded-md border border-neutral-mid border-neutral-mid"
  >
    <div class="p-4">
      <h4 class="mb-4 text-sm leading-none font-medium">Tags</h4>
      <template v-for="tag in tags" :key="tag">
        <div class="text-sm">{{ tag }}</div>
        <Separator class="my-2" />
      </template>
    </div>
  </ScrollArea>
</template>

Horizontal

<script setup lang="ts">
import { ScrollArea } from "@/components/ui/scroll-area";
import { ScrollBar } from "@/components/ui/scroll-area";
import * as UI from "@/components/ui/scroll-area";

const Component = UI.ScrollArea;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <ScrollArea
    class="w-96 rounded-md border border-neutral-mid border-neutral-mid whitespace-nowrap"
  >
    <div class="flex w-max space-x-4 p-4">
      <figure v-for="i in 8" :key="i" class="shrink-0">
        <div
          class="flex h-40 w-32 items-center justify-center overflow-hidden rounded-md bg-neutral-subtle text-sm"
        >
          {{ i }}
        </div>
        <figcaption class="pt-2 text-xs text-neutral-mid">
          Photo by
          <span class="font-semibold text-neutral-strong">Artist {{ i }}</span>
        </figcaption>
      </figure>
    </div>
    <ScrollBar orientation="horizontal" />
  </ScrollArea>
</template>

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Reka UI.

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.