Scroll Area - rafty/ui Docs

Enhances native scroll functionality for custom, cross-browser styling.

This component is made on top of Radix UIs Scroll Area Component with our styling conventions. This component has been shared with you, ensuring that all its native properties are accessible.

Anatomy

Import the component.

import { ScrollArea } from "@rafty/ui";

<ScrollArea />;

Usage

Sample 1

Sample 2

Sample 3

Sample 4

Sample 5

Sample 6

Sample 7

Sample 8

Sample 9

Sample 10

<ScrollArea className="h-[225px] w-[200px] p-1">
  <div className="dark:divide-secondary-700 divide-y">
    <div className="px-2 py-1">
      <p className="text-center">
        Sample 1
      </p>
    </div>
    <div className="px-2 py-1 ">
      <p className="text-center">
        Sample 2
      </p>
    </div>
    <div className="px-2 py-1 ">
      <p className="text-center">
        Sample 3
      </p>
    </div>
    <div className="px-2 py-1 ">
      <p className="text-center">
        Sample 4
      </p>
    </div>
    <div className="px-2 py-1 ">
      <p className="text-center">
        Sample 5
      </p>
    </div>
    <div className="px-2 py-1 ">
      <p className="text-center">
        Sample 6
      </p>
    </div>
    <div className="px-2 py-1 ">
      <p className="text-center">
        Sample 7
      </p>
    </div>
    <div className="px-2 py-1 ">
      <p className="text-center">
        Sample 8
      </p>
    </div>
    <div className="px-2 py-1 ">
      <p className="text-center">
        Sample 9
      </p>
    </div>
    <div className="px-2 py-1 ">
      <p className="text-center">
        Sample 10
      </p>
    </div>
  </div>
</ScrollArea>