Scroll Area

Usage

Include CSS

Import Tailwind and one full Basecoat style bundle.

@import "tailwindcss";
@import "basecoat-css/vega.css";

Or import only the base CSS and one style pack.

@import "tailwindcss";
@import "basecoat-css/base.css";
@import "basecoat-css/styles/vega.css";

Scroll Area uses Basecoat base scrollbar utilities and has no dedicated component CSS file.

Using CDN or bundler imports? See the Installation page.

Add your scroll area HTML

Use scrollbar or scrollbar-sm on an element that already scrolls with overflow-auto, overflow-y-auto, or overflow-x-auto.

<div class="scrollbar h-72 overflow-y-auto rounded-md border p-4">
  Your scrollable content here.
</div>

Use scrollbar or scrollbar-sm on an element that already scrolls with overflow-auto, overflow-y-auto, or overflow-x-auto.

The utility augments native scrolling for cross-browser styling. It does not wrap content, replace browser scroll behavior, or require JavaScript.

Examples

These examples use Card as the framed surface so border and radius come from the active style pack.

Horizontal

Use scrollbar with overflow-x-auto for horizontal scrolling.

Photo by Ornella Binni

Photo by Tom Byrom

Photo by Vladimir Malyavko

<div class="card w-full max-w-sm p-0">
  <div class="scrollbar overflow-x-auto">
    <div class="flex w-max gap-4 p-4">
      <figure class="shrink-0">
        <div class="aspect-[3/4] w-40 rounded-md bg-muted"></div>
        <figcaption class="text-muted-foreground pt-2 text-xs">Photo by Ornella Binni</figcaption>
      </figure>
      <figure class="shrink-0">
        <div class="aspect-[3/4] w-40 rounded-md bg-muted"></div>
        <figcaption class="text-muted-foreground pt-2 text-xs">Photo by Tom Byrom</figcaption>
      </figure>
      <figure class="shrink-0">
        <div class="aspect-[3/4] w-40 rounded-md bg-muted"></div>
        <figcaption class="text-muted-foreground pt-2 text-xs">Photo by Vladimir Malyavko</figcaption>
      </figure>
    </div>
  </div>
</div>

Thin

Use scrollbar-sm for compact scrollable regions like menus, listboxes, sidebars, and command results.

Recent files

<div class="card w-full max-w-sm p-1">
  <div class="px-2 py-1.5 text-xs font-medium text-muted-foreground">Recent files</div>
  <div class="scrollbar-sm max-h-48 overflow-y-auto">
    <button type="button" class="flex w-full items-center justify-between rounded-sm px-2 py-1.5 text-sm hover:bg-accent">
      <span>project-roadmap.md</span>
      <span class="text-xs text-muted-foreground">2m</span>
    </button>
    <button type="button" class="flex w-full items-center justify-between rounded-sm px-2 py-1.5 text-sm hover:bg-accent">
      <span>release-notes.md</span>
      <span class="text-xs text-muted-foreground">8m</span>
    </button>
    <button type="button" class="flex w-full items-center justify-between rounded-sm px-2 py-1.5 text-sm hover:bg-accent">
      <span>api-contract.json</span>
      <span class="text-xs text-muted-foreground">16m</span>
    </button>
    <button type="button" class="flex w-full items-center justify-between rounded-sm px-2 py-1.5 text-sm hover:bg-accent">
      <span>pricing-table.html</span>
      <span class="text-xs text-muted-foreground">1h</span>
    </button>
    <button type="button" class="flex w-full items-center justify-between rounded-sm px-2 py-1.5 text-sm hover:bg-accent">
      <span>onboarding-flow.md</span>
      <span class="text-xs text-muted-foreground">2h</span>
    </button>
    <button type="button" class="flex w-full items-center justify-between rounded-sm px-2 py-1.5 text-sm hover:bg-accent">
      <span>settings-panel.ts</span>
      <span class="text-xs text-muted-foreground">3h</span>
    </button>
    <button type="button" class="flex w-full items-center justify-between rounded-sm px-2 py-1.5 text-sm hover:bg-accent">
      <span>invoice-template.html</span>
      <span class="text-xs text-muted-foreground">5h</span>
    </button>
  </div>
</div>

RTL

Set dir="rtl" on the scrollable element or one of its ancestors to use right-to-left layout.

العلامات

v1.2.0-beta.50

v1.2.0-beta.49

v1.2.0-beta.48

v1.2.0-beta.47

v1.2.0-beta.46

v1.2.0-beta.45

v1.2.0-beta.44

v1.2.0-beta.43

v1.2.0-beta.42

v1.2.0-beta.41

v1.2.0-beta.40

v1.2.0-beta.39

v1.2.0-beta.38

<div class="card h-72 p-0">
  <div dir="rtl" class="scrollbar h-full overflow-y-auto p-4">
    <div class="space-y-4">
      <h4 class="text-sm leading-none font-medium">العلامات</h4>
      <div class="text-sm">
        <div class="border-b py-2">v1.2.0-beta.50</div>
        <div class="border-b py-2">v1.2.0-beta.49</div>
        <div class="border-b py-2">v1.2.0-beta.48</div>
        <div class="border-b py-2">v1.2.0-beta.47</div>
        <div class="border-b py-2">v1.2.0-beta.46</div>
        <div class="border-b py-2">v1.2.0-beta.45</div>
        <div class="border-b py-2">v1.2.0-beta.44</div>
        <div class="border-b py-2">v1.2.0-beta.43</div>
        <div class="border-b py-2">v1.2.0-beta.42</div>
        <div class="border-b py-2">v1.2.0-beta.41</div>
        <div class="border-b py-2">v1.2.0-beta.40</div>
        <div class="border-b py-2">v1.2.0-beta.39</div>
        <div class="py-2">v1.2.0-beta.38</div>
      </div>
    </div>
  </div>
</div>