Scroll Area

Imports

Use the same component slug for React, Vue, and style token lookup. Do not import components from package roots.

import { ScrollArea, ScrollBar } from "@line/abc-def-react/scroll-area";

<script setup lang="ts">
import { ScrollArea, ScrollBar } from "@line/abc-def-vue/scroll-area";
</script>

Shadcn references

Compare the corresponding shadcn React and Vue documentation for the same component slug.

Basic usage

import { ScrollArea, ScrollBar } from "@line/abc-def-react/scroll-area";

export function Example() {
  return (
    <ScrollArea>
      <div>--primary</div>
      <div>--secondary</div>
      <div>--accent</div>
      <div>--destructive</div>
      <ScrollBar />
    </ScrollArea>
  );
}

<script setup lang="ts">
import { ScrollArea, ScrollBar } from "@line/abc-def-vue/scroll-area";
</script>

<template>
  <ScrollArea class="h-32 w-48 rounded-md border p-4">
    <div>--primary</div>
    <div>--secondary</div>
    <div>--accent</div>
    <div>--destructive</div>
    <ScrollBar />
  </ScrollArea>
</template>

Component tokens

Composition exports

Usage notes

• Use only when a nested scroll region is intentional.
• Avoid trapping long page content unnecessarily.
• Related component tokens use the `scroll-area` token group in `@line/abc-def-styles/css`.