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: 10 }).map(() => (
        <Card className="h-24 w-24" type="linked" />
      ))}
    </div>
  );

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

Dark mode

You can change the theme between "light" (default) and "dark".

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

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

  return (
    <ScrollArea
      orientation="horizontal"
      theme="dark"
      className="max-w-full rounded"
    >
      <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

Inherits properties from HTMLElement.

Prop	Type	Default
asChild	boolean	false
children	ReactNode
className	string
forceMount	trueundefined
scrollHideDelay	number	600
theme	"dark""light"	"light"
type	"auto""always""scroll""hover"	"hover"