Scroll Area — ARC UI

Components

Scroll Area

content

static

<arc-scroll-area>

Overview

Guidelines

When to use

Set `max-height` when Scroll Area is used inside fixed-height layouts like sidebars, modals, or dropdowns
Use `orientation="horizontal"` for image galleries, code blocks, or horizontally scrollable tables
Place Scroll Area around content that may exceed the available space rather than letting the entire page scroll
Ensure the scroll area has a visible boundary (border or background) so users know the region is scrollable
Use `orientation="both"` sparingly -- only for truly two-dimensional content like data grids

When not to use

Do not nest multiple Scroll Areas -- nested scrolling regions create confusing interaction
Do not set `max-height` to very small values that hide most content without clear indication
Do not use Scroll Area for the main page scroll -- it is designed for embedded scrollable regions
Do not override the custom scrollbar styles with conflicting global CSS -- the component encapsulates them in shadow DOM
Avoid using Scroll Area when content fits within the viewport -- unnecessary scroll containers add cognitive overhead

Features

Custom thin scrollbar styling (6px) for both Webkit and Firefox browsers using design tokens
Three orientation modes: `vertical` (default), `horizontal`, and `both` for flexible scroll direction control
Optional `max-height` attribute to constrain the scrollable region within a fixed space
Smooth scroll behavior via `scroll-behavior: smooth` CSS property
Scrollbar thumb hover effect that transitions from border-bright to text-ghost color
Keyboard-accessible with `tabindex="0"` and `role="region"` for arrow-key scrolling
Inherits parent border-radius for seamless visual clipping
Firefox scrollbar support via `scrollbar-width: thin` and `scrollbar-color`

Preview

Line 1: Scroll Area provides styled scrollable containers.

Line 2: Custom thin scrollbars match the design system.

Line 3: Supports vertical, horizontal, and both orientations.

Line 4: Set max-height to constrain the visible area.

Line 5: Keyboard accessible with tabindex and role region.

Line 6: Smooth scroll behavior is enabled by default.

Line 7: Works great in sidebars, modals, and dropdowns.

Line 8: Try scrolling down to see more content below.

Usage

<arc-scroll-area max-height="300px">
  <p>Your scrollable content here...</p>
  <!-- More content that exceeds 300px height -->
</arc-scroll-area>

import { ScrollArea } from '@arclux/arc-ui-react';

<ScrollArea maxHeight="300px">
  <p>Your scrollable content here...</p>
  {/* More content that exceeds 300px height */}
</ScrollArea>

<script setup>
import { ScrollArea } from '@arclux/arc-ui-vue';
</script>

<template>
  <ScrollArea max-height="300px">
    <p>Your scrollable content here...</p>
    <!-- More content that exceeds 300px height -->
  </ScrollArea>
</template>

<script>
  import { ScrollArea } from '@arclux/arc-ui-svelte';
</script>

<ScrollArea max-height="300px">
  <p>Your scrollable content here...</p>
  <!-- More content that exceeds 300px height -->
</ScrollArea>

import { Component } from '@angular/core';
import { ScrollArea } from '@arclux/arc-ui-angular';

@Component({
  imports: [ScrollArea],
  template: `
    <ScrollArea max-height="300px">
      <p>Your scrollable content here...</p>
      <!-- More content that exceeds 300px height -->
    </ScrollArea>
  `,
})
export class MyComponent {}

import { ScrollArea } from '@arclux/arc-ui-solid';

<ScrollArea maxHeight="300px">
  <p>Your scrollable content here...</p>
  {/* More content that exceeds 300px height */}
</ScrollArea>

import { ScrollArea } from '@arclux/arc-ui-preact';

<ScrollArea maxHeight="300px">
  <p>Your scrollable content here...</p>
  {/* More content that exceeds 300px height */}
</ScrollArea>

<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-scroll-area — requires scroll-area.css + tokens.css (or arc-ui.css) -->
<div class="arc-scroll-area">
  <div
    class="scroll-area"
    tabindex="0"
    role="region"
    aria-label="Scrollable content"
  >
    Scroll Area
  </div>
</div>

<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-scroll-area — self-contained, no external CSS needed -->
<style>
  @media (prefers-reduced-motion: reduce) {
    .arc-scroll-area *,
        .arc-scroll-area *::before,
        .arc-scroll-area *::after { animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important; }
  }
  .arc-scroll-area .scroll-area::-webkit-scrollbar-thumb:hover { background: rgb(110, 115, 155); }
</style>
<div class="arc-scroll-area" style="display: block; position: relative">
  <div
    class="scroll-area" style="overflow: hidden; scroll-behavior: smooth; border-radius: var(--radius-full); width: 6px; height: 6px; background: var(--bg-elevated); scrollbar-width: thin; scrollbar-color: var(--border-bright) var(--bg-elevated)"
    tabindex="0"
    role="region"
    aria-label="Scrollable content"
  >
    Scroll Area
  </div>
</div>

API

Prop	Type	Default	Description
`max-height`	`string`	`''`	CSS max-height value applied to the scrollable container. Use any valid CSS length (e.g. `300px`, `50vh`).
`orientation`	`'vertical' \| 'horizontal' \| 'both'`	`'vertical'`	Scroll direction. `vertical` shows a vertical scrollbar, `horizontal` shows a horizontal scrollbar, `both` shows both.