Components

Scroll area

Constrain overflowing content behind branded scrollbars.

Import

import { ScrollArea } from "@dr-max/ui/scroll-area"

The entry carries its own precompiled CSS — no extra style imports needed.

Usage

Give the scroll area a size (e.g. via class) — content that overflows it scrolls behind Dr. Max styled scrollbars:

Paracetamol is used to treat mild to moderate pain and fever. Always read the package leaflet before use. Do not exceed the recommended daily dose. If symptoms persist for more than three days, consult your doctor or pharmacist. Keep out of reach of children.

<script setup lang="ts">
import { ScrollArea } from "@dr-max/ui/scroll-area"
</script>

<template>
  <ScrollArea class="h-32 w-72">
    Paracetamol is used to treat mild to moderate pain and fever. Always read
    the package leaflet before use. Do not exceed the recommended daily dose.
    If symptoms persist for more than three days, consult your doctor or
    pharmacist. Keep out of reach of children.
  </ScrollArea>
</template>

Orientation

Scrolling is vertical by default — switch to horizontal or both depending on how the content overflows:

<template>
  <ScrollArea orientation="horizontal" class="w-72">
    <div class="flex w-max gap-2">
      <!-- horizontally overflowing content -->
    </div>
  </ScrollArea>

  <ScrollArea orientation="both" class="h-32 w-72">
    <!-- content overflowing in both directions -->
  </ScrollArea>
</template>

Playground

slot

orientation

class

<script setup lang="ts">
import { ScrollArea } from '@dr-max/ui/scroll-area'
</script>

<template>
  <ScrollArea orientation="vertical" class="h-32 w-72">Paracetamol is used to treat mild to moderate pain and fever. Always read the package leaflet before use. Do not exceed the recommended daily dose. If symptoms persist for more than three days, consult your doctor or pharmacist. Keep out of reach of children.</ScrollArea>
</template>