---
title: Scroll area
description: Augments native scroll functionality for custom, cross-browser styling.
thumbnail:
  image: /previews/components/core/scroll-area.jpeg
  video: /previews/components/core/scroll-area.mp4
links:
  - label: Radix docs
    href: https://react-spectrum.adobe.com/react-aria/TextField.html
  - label: Report an issue
    href: https://github.com/mehdibha/dotUI/issues/new/choose
  - label: Edit this page
    href: https://github.com/mehdibha/dotUI/tree/main/content/components/layout/scroll-area.mdx?plain=1
---

<ComponentPreview
  name="core/scroll-area-default"
  preview={`<div className="rounded-md border p-6">
    <ScrollArea className="h-72 w-full max-w-sm" type="always">
      <div className="space-y-4 p-4 pr-8">
        <h4 className="text-md font-bold">Principles of the typographic craft</h4>
        <p>
          Three fundamental aspects of typography are legibility, readability, and aesthetics.
          Although in a non-technical sense “legible” and “readable” are often used synonymously,
          typographically they are separate but related concepts.
        </p>
        <p>
          Legibility describes how easily individual characters can be distinguished from one
          another. It is described by Walter Tracy as “the quality of being decipherable and
          recognisable”. For instance, if a “b” and an “h”, or a “3” and an “8”, are difficult to
          distinguish at small sizes, this is a problem of legibility.
        </p>
        <p>
          Typographers are concerned with legibility insofar as it is their job to select the
          correct font to use. Brush Script is an example of a font containing many characters
          that might be difficult to distinguish. The selection of cases influences the legibility
          of typography because using only uppercase letters (all-caps) reduces legibility.
        </p>
      </div>
    </ScrollArea>
  </div>`}
/>

## Installation

<Tabs items={["CLI", "Manual"]}>
  <Tab value="CLI">
  
  ```package-install
npx dotui-cli@latest add scroll-area
```

  </Tab>
  <Tab value="manual">
    <Steps>
      <Step>Install the following dependencies:</Step>

    ```package-install
    @radix-ui/react-scroll-area
    ```

      <Step>Copy and paste the following code into your project.</Step>
      <ComponentSource name="core/scroll-area" />
      <Step>Update the import paths to match your project setup.</Step>
    </Steps>

  </Tab>
</Tabs>

## Usage

Use `ScrollArea` to augment native scroll functionality for custom, cross-browser styling.

## Options

### Size

Use the `size` prop to control the size of the scrollbar.

<ComponentPreview
  name="core/scroll-area-sizes"
  preview={`<div className="rounded-md border p-3">
    <ScrollArea size={size} className="h-72" type="always">
      <div className="space-y-4 p-4 pr-8">
        <h4 className="text-md font-bold">Principles of the typographic craft</h4>
        <p>
          Three fundamental aspects of typography are legibility, readability, and aesthetics.
          Although in a non-technical sense “legible” and “readable” are often used
          synonymously, typographically they are separate but related concepts.
        </p>
        <p>
          Legibility describes how easily individual characters can be distinguished from one
          another. It is described by Walter Tracy as “the quality of being decipherable and
          recognisable”. For instance, if a “b” and an “h”, or a “3” and an “8”, are difficult
          to distinguish at small sizes, this is a problem of legibility.
        </p>
        <p>
          Typographers are concerned with legibility insofar as it is their job to select the
          correct font to use. Brush Script is an example of a font containing many characters
          that might be difficult to distinguish. The selection of cases influences the
          legibility of typography because using only uppercase letters (all-caps) reduces
          legibility.
        </p>
      </div>
    </ScrollArea>
  </div>`}
/>

### Scrollbars

Control the scrollable axes using the `scrollbars` prop.

<ComponentPreview
  name="core/scroll-area-scrollbars"
  preview={`<div className="rounded-md border p-6">
    <ScrollArea
      scrollbars={scrollbars as ScrollAreaProps["scrollbars"]}
      className="h-44 w-full max-w-sm"
      type="always"
    >
      <div className="flex w-[500px] items-start gap-4">
        <div className="space-y-4 p-4 pr-8">
          <h4 className="text-md font-bold">Principles of the typographic craft</h4>
          <p>
            Three fundamental aspects of typography are legibility, readability, and aesthetics.
            Although in a non-technical sense “legible” and “readable” are often used
            synonymously, typographically they are separate but related concepts.
          </p>
          <p>
            Legibility describes how easily individual characters can be distinguished from one
            another. It is described by Walter Tracy as “the quality of being decipherable and
            recognisable”. For instance, if a “b” and an “h”, or a “3” and an “8”, are difficult
            to distinguish at small sizes, this is a problem of legibility.
          </p>
          <p>
            Typographers are concerned with legibility insofar as it is their job to select the
            correct font to use. Brush Script is an example of a font containing many characters
            that might be difficult to distinguish. The selection of cases influences the
            legibility of typography because using only uppercase letters (all-caps) reduces
            legibility.
          </p>
        </div>
        <div className="space-y-4 p-4 pr-8">
          <h4 className="text-md font-bold">Principles of the typographic craft</h4>
          <p>
            Three fundamental aspects of typography are legibility, readability, and aesthetics.
            Although in a non-technical sense “legible” and “readable” are often used
            synonymously, typographically they are separate but related concepts.
          </p>
          <p>
            Legibility describes how easily individual characters can be distinguished from one
            another. It is described by Walter Tracy as “the quality of being decipherable and
            recognisable”. For instance, if a “b” and an “h”, or a “3” and an “8”, are difficult
            to distinguish at small sizes, this is a problem of legibility.
          </p>
          <p>
            Typographers are concerned with legibility insofar as it is their job to select the
            correct font to use. Brush Script is an example of a font containing many characters
            that might be difficult to distinguish. The selection of cases influences the
            legibility of typography because using only uppercase letters (all-caps) reduces
            legibility.
          </p>
        </div>
      </div>
      </ScrollArea>
    </div>`}
/>

## API Reference

`ScrollArea` accepts all HTML div element props and the following:

| Prop              | Type                                        | Default      | Description                                                                                                                                                                                |
| ----------------- | ------------------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `type`            | `'auto' \| 'always' \| 'scroll' \| 'hover'` | `'hover'`    | Describes the nature of scrollbar visibility.                                                                                                                                              |
| `scrollHideDelay` | `number`                                    | `600`        | If type is set to either 'scroll' or 'hover', this prop determines the length of time, in milliseconds, before the scrollbars are hidden after the user stops interacting with scrollbars. |
| `dir`             | `'ltr' \| 'rtl'`                            | `600`        | The reading direction of the scroll area                                                                                                                                                   |
| `scrollbars`      | `'vertical' \| 'horizontal' \| 'both'`      | `'vertical'` | Controls the scrollable axes.                                                                                                                                                              |
