Scroll Area

Usage

Simply wrap elements in <ScrollArea>. You must define a height or a max-height.

import { Card } from "stylus-ui/Card";
import { ScrollArea } from "stylus-ui/ScrollArea";

export default () => {
  const Cards = () => (
    <div className="flex flex-col gap-2 px-4">
      {Array.from({ length: 20 }).map(() => (
        <Card className="h-8 w-64 shrink-0" type="linked" />
      ))}
    </div>
  );

  return (
    <ScrollArea className="h-48">
      <Cards />
    </ScrollArea>
  );
};

Horizontal scroll

A horizontal scrollbar will appear when setting a width or max-width.

import { Card } from "stylus-ui/Card";
import { ScrollArea } from "stylus-ui/ScrollArea";

export default () => {
  const Cards = () => (
    <div className="flex max-w-full gap-2 py-4">
      {Array.from({ length: 20 }).map(() => (
        <Card className="h-24 w-24 shrink-0" type="linked" />
      ))}
    </div>
  );

  return (
    <ScrollArea className="max-w-full">
      <Cards />
    </ScrollArea>
  );
};

Scrollbar visibility

The type prop for <ScrollArea> describes the nature of scrollbar visibility, similar to how the scrollbar preferences in MacOS control visibility of native scrollbars.

type can be set to "auto", "always", "scroll", or "hover" (default).

• "auto" means that scrollbars are visible when content is overflowing on the corresponding orientation.
• "always" means that scrollbars are always visible regardless of whether the content is overflowing.
• "scroll" means that scrollbars are visible when the user is scrolling along its corresponding orientation.
• "hover" means that scrollbars are visible when the user is scrolling along its corresponding orientation and when the user is hovering over the scroll area.

API Reference

ScrollArea

A scrollable region with custom, cross-browser styling.

asChild

boolean

---

dir

"ltr" | "rtl"

---

overflowHidden

boolean = false

Hide overflow on the viewport (e.g. for custom scrollbars).

---

scrollHideDelay

number

---

theme

"light" | "dark" = "dark"

Visual theme for the scrollbar.

---

type

"scroll" | "auto" | "always" | "hover"

---

viewportRef

RefObject<HTMLDivElement>

Ref forwarded to the scrollable viewport element.

---