> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/huntabyte/shadcn-svelte/llms.txt
> Use this file to discover all available pages before exploring further.

# Scroll Area

> Augments native scroll functionality for custom, cross-browser styling.

## Installation

<Tabs>
  <Tab title="CLI">
    ```bash theme={null}
    npx shadcn-svelte@next add scroll-area
    ```
  </Tab>

  <Tab title="Manual">
    <Steps>
      <Step title="Install bits-ui">
        ```bash theme={null}
        npm install bits-ui -D
        ```
      </Step>

      <Step title="Copy and paste the component source">
        Copy and paste the component source code into your project.
      </Step>
    </Steps>
  </Tab>
</Tabs>

## Usage

```svelte showLineNumbers theme={null}
<script lang="ts">
  import { ScrollArea } from "$lib/components/ui/scroll-area/index.js";
</script>
```

```svelte showLineNumbers theme={null}
<ScrollArea class="h-[200px] w-[350px] rounded-md border p-4">
  Jokester began sneaking into the castle in the middle of the night and
  leaving jokes all over the place: under the king's pillow, in his soup, even
  in the royal toilet. The king was furious, but he couldn't seem to stop
  Jokester. And then, one day, the people of the kingdom discovered that the
  jokes left by Jokester were so funny that they couldn't help but laugh. And
  once they started laughing, they couldn't stop.
</ScrollArea>
```

## Examples

### Horizontal Scrolling

Set the `orientation` prop to `"horizontal"` to enable horizontal scrolling.

## Links

* [Source](https://github.com/huntabyte/shadcn-svelte/tree/next/sites/docs/src/lib/registry/ui/scroll-area)
* [Bits UI Documentation](https://bits-ui.com/docs/components/scroll-area)
* [API Reference](https://bits-ui.com/docs/components/scroll-area#api-reference)