Layout

Scroll Area

Container with custom scrollbars. Use to constrain a tall list inside a card.

Preview

import { ScrollArea } from '@brika/clay/components/scroll-area';

/** Vertical scroll area constraining a long list to a fixed height. */
export default function ScrollAreaDefaultDemo() {
  const rows = Array.from({ length: 20 }, (_, i) => `Component ${i + 1}`);
  return (
    <ScrollArea className="h-72 w-64 rounded-md border border-clay-hairline">
      <ul className="divide-y divide-clay-hairline">
        {rows.map((row) => (
          <li key={row} className="px-4 py-2 text-clay-default text-sm">
            {row}
          </li>
        ))}
      </ul>
    </ScrollArea>
  );
}

01 Installation

Install

Pull Scroll Area from the barrel for everyday use, or the granular path when you want a tighter bundle.

tsxBarrel1 line

import { ScrollArea } from "@brika/clay";

tsxGranular1 line

import { ScrollArea } from "@brika/clay/components/scroll-area";

02 Usage

A minimal example

Drop this into a page. Native HTML attributes pass through to the underlying primitive.

tsxScroll Area.tsx17 lines

import { ScrollArea } from '@brika/clay/components/scroll-area';

/** Vertical scroll area constraining a long list to a fixed height. */
export default function ScrollAreaDefaultDemo() {
  const rows = Array.from({ length: 20 }, (_, i) => `Component ${i + 1}`);
  return (
    <ScrollArea className="h-72 w-64 rounded-md border border-clay-hairline">
      <ul className="divide-y divide-clay-hairline">
        {rows.map((row) => (
          <li key={row} className="px-4 py-2 text-clay-default text-sm">
            {row}
          </li>
        ))}
      </ul>
    </ScrollArea>
  );
}

03 Examples

Scroll Area, every way

Card

Scroll area inside a Card, constrains a tall settings list inside a bounded surface.

GitHub

import { Card, CardContent, CardHeader, CardTitle } from '@brika/clay/components/card';
import { ScrollArea } from '@brika/clay/components/scroll-area';
const SETTINGS = [
  'Appearance', 'Notifications', 'Privacy', 'Security', 'Connected apps',
  'Billing', 'API keys', 'Webhooks', 'Team members', 'Audit log',
  'Domains', 'Exports', 'Integrations', 'Danger zone',
];

/** Scroll area inside a Card, constrains a tall settings list inside a bounded surface. */
export default function ScrollAreaCardDemo() {
  return (
    <Card className="w-64">
      <CardHeader className="pb-2">
        <CardTitle className="text-sm">Settings</CardTitle>
      </CardHeader>
      <CardContent className="p-0">
        <ScrollArea className="h-48">
          <ul className="divide-y divide-clay-hairline px-0">
            {SETTINGS.map((item) => (
              <li
                key={item}
                className="cursor-pointer px-4 py-2 text-clay-default text-sm hover:bg-clay-control"
              >
                {item}
              </li>
            ))}
          </ul>
        </ScrollArea>
      </CardContent>
    </Card>
  );
}

Horizontal

Horizontal scroll, use `ScrollBar orientation="horizontal"` to show a horizontal bar.

GitHub

import { ScrollArea, ScrollBar } from '@brika/clay/components/scroll-area';
const TAGS = [
  'typescript', 'react', 'tailwindcss', 'radix-ui', 'vite', 'astro', 'bun',
  'framer-motion', 'zod', 'tanstack-query', 'drizzle-orm', 'lucia-auth',
];

/** Horizontal scroll, use `ScrollBar orientation="horizontal"` to show a horizontal bar. */
export default function ScrollAreaHorizontalDemo() {
  return (
    <ScrollArea className="w-80 whitespace-nowrap rounded-md border border-clay-hairline pb-3">
      <div className="flex gap-2 px-4 py-3">
        {TAGS.map((tag) => (
          <span
            key={tag}
            className="inline-flex shrink-0 items-center rounded-full border border-clay-hairline bg-clay-elevated px-3 py-1 font-mono text-clay-default text-xs"
          >
            {tag}
          </span>
        ))}
      </div>
      <ScrollBar orientation="horizontal" />
    </ScrollArea>
  );
}

04 Accessibility

Accessibility

The scrollable region carries role="region", pair with aria-label for context.
Custom scrollbars do not affect keyboard scrolling, arrow keys and Page Up/Down work normally.
Horizontal scroll areas should be announced; users may not expect horizontal scrolling.

05 Tokens 3 theme-overridable

Theme tokens

Every CSS variable Scroll Area reads, with its default and the dotted path you'd write in a ThemeConfig JSON to override it. Set any of these in your theme to retune Scroll Area without touching component code.

Scroll Area tokens

3 tokens

ColorFill, border, and text colors.3

--scroll-area-thumb-colorcolorvar(--border)
components.scrollArea.thumbColor
Background color of the draggable scrollbar thumb.
--scroll-area-track-colorcolortransparent
components.scrollArea.trackColor
Border color drawn along the scrollbar track edge that meets the viewport (left edge for vertical, top edge for horizontal). Defaults to transparent so the track blends into the surface behind it.
--scroll-area-viewport-ringcolorvar(--ring)
components.scrollArea.viewportRing
Focus ring color drawn around the scroll viewport when keyboard-focused; rendered at 50% opacity.

Override in a theme

Authoring a theme is plain JSON. Drop overrides under components.scrollArea, the names are camelCase versions of the variable suffix.

jsonmy-theme.json12 lines

{
  "id": "my-theme",
  "name": "My Theme",
  "description": "...",
  "accentSwatches": ["#000"],

  "components": {
    "scrollArea": {
      "thumbColor": "var(--border)"
    }
  }
}

Then apply with applyTheme(myTheme) (see the theming guide), scope it to a subtree with themeToCssVars(myTheme, mode), or consume any token directly in your own JSX with the matching Tailwind utility (e.g. bg-scroll-area-…) — see the chips on each token row.

06 API reference

API reference

Props specific to Scroll Area. Native HTML attributes pass through to the underlying primitive, see the component source on GitHub for the full type signature.

<ScrollArea />

passthrough

No wrapper-specific props, all attributes pass through to the underlying primitive.

<ScrollBar />

passthrough

No wrapper-specific props, all attributes pass through to the underlying primitive.