Tailwind CSS Custom Scrollbar

Use the scrollbar utility to restyle or hide the native scrollbar of any scrollable element, like a sidebar, a code block, or a chat feed. For fading the edges of a scroller, use the scroll fade utility.

<div
  class="scrollbar h-48 w-full max-w-sm overflow-y-auto rounded-lg border p-4 text-sm/6 text-muted-foreground"
>
  <p class="mb-4">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat.
  </p>
  <p class="mb-4">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
    eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
    sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <p>
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
    doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
    veritatis et quasi architecto beatae vitae dicta sunt explicabo.
  </p>
</div>

Usage

Add the scrollbar class to an element that scrolls and its scrollbars are styled, vertical and horizontal alike. Add scrollbar-sm for a thinner thumb in tighter spaces.

Class	Description
`scrollbar`	Add to a scrollable element to style its scrollbar
`scrollbar-sm`	Add to `scrollbar` for a thinner variant
`scrollbar-none`	Add to hide the scrollbar while the element still scrolls

<div class="scrollbar h-48 overflow-y-auto">Long content</div>

Examples

Small scrollbar

The small variant suits panels and popups where the default width feels heavy.

<div
  class="scrollbar scrollbar-sm h-48 w-full max-w-sm overflow-y-auto rounded-lg border p-4 text-sm/6 text-muted-foreground"
>
  <p class="mb-4">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat.
  </p>
  <p class="mb-4">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
    eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
    sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <p>
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
    doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
    veritatis et quasi architecto beatae vitae dicta sunt explicabo.
  </p>
</div>

Hide the scrollbar

Add scrollbar-none to hide the scrollbar while the element keeps scrolling, like a row of chips that scrolls sideways.

<div class="scrollbar-none flex w-full max-w-sm gap-2 overflow-x-auto">
  <span class="badge badge-secondary whitespace-nowrap">Design</span>
  <span class="badge badge-secondary whitespace-nowrap">Engineering</span>
  <span class="badge badge-secondary whitespace-nowrap">Marketing</span>
  <span class="badge badge-secondary whitespace-nowrap">Sales</span>
  <span class="badge badge-secondary whitespace-nowrap">Support</span>
  <span class="badge badge-secondary whitespace-nowrap">Finance</span>
  <span class="badge badge-secondary whitespace-nowrap">Legal</span>
  <span class="badge badge-secondary whitespace-nowrap">Operations</span>
  <span class="badge badge-secondary whitespace-nowrap">Product</span>
  <span class="badge badge-secondary whitespace-nowrap">Research</span>
  <span class="badge badge-secondary whitespace-nowrap">Security</span>
  <span class="badge badge-secondary whitespace-nowrap">People</span>
</div>

RTL

Add dir="rtl" to any parent element, typically <html>, to render right-to-left. See the RTL guide for details.

<div id="scrollbar-rtl-demo" dir="rtl">
  <div class="scrollbar h-72 w-48 overflow-y-auto rounded-lg border p-4 text-sm">
    <h4 class="mb-4 leading-none font-medium" data-i18n="tags">العلامات</h4>
    <div>v1.2.0-beta.50</div>
    <div class="separator my-2"></div>
    <div>v1.2.0-beta.49</div>
    <div class="separator my-2"></div>
    <div>v1.2.0-beta.48</div>
    <div class="separator my-2"></div>
    <div>v1.2.0-beta.47</div>
    <div class="separator my-2"></div>
    <div>v1.2.0-beta.46</div>
    <div class="separator my-2"></div>
    <div>v1.2.0-beta.45</div>
    <div class="separator my-2"></div>
    <div>v1.2.0-beta.44</div>
    <div class="separator my-2"></div>
    <div>v1.2.0-beta.43</div>
    <div class="separator my-2"></div>
    <div>v1.2.0-beta.42</div>
    <div class="separator my-2"></div>
    <div>v1.2.0-beta.41</div>
    <div class="separator my-2"></div>
    <div>v1.2.0-beta.40</div>
    <div class="separator my-2"></div>
    <div>v1.2.0-beta.39</div>
    <div class="separator my-2"></div>
    <div>v1.2.0-beta.38</div>
    <div class="separator my-2"></div>
    <div>v1.2.0-beta.37</div>
    <div class="separator my-2"></div>
    <div>v1.2.0-beta.36</div>
    <div class="separator my-2"></div>
    <div>v1.2.0-beta.35</div>
    <div class="separator my-2"></div>
    <div>v1.2.0-beta.34</div>
    <div class="separator my-2"></div>
    <div>v1.2.0-beta.33</div>
    <div class="separator my-2"></div>
    <div>v1.2.0-beta.32</div>
    <div class="separator my-2"></div>
    <div>v1.2.0-beta.31</div>
    <div class="separator my-2"></div>
    <div>v1.2.0-beta.30</div>
    <div class="separator my-2"></div>
    <div>v1.2.0-beta.29</div>
    <div class="separator my-2"></div>
    <div>v1.2.0-beta.28</div>
    <div class="separator my-2"></div>
    <div>v1.2.0-beta.27</div>
    <div class="separator my-2"></div>
    <div>v1.2.0-beta.26</div>
    <div class="separator my-2"></div>
    <div>v1.2.0-beta.25</div>
    <div class="separator my-2"></div>
    <div>v1.2.0-beta.24</div>
    <div class="separator my-2"></div>
    <div>v1.2.0-beta.23</div>
    <div class="separator my-2"></div>
    <div>v1.2.0-beta.22</div>
    <div class="separator my-2"></div>
    <div>v1.2.0-beta.21</div>
    <div class="separator my-2"></div>
    <div>v1.2.0-beta.20</div>
    <div class="separator my-2"></div>
    <div>v1.2.0-beta.19</div>
    <div class="separator my-2"></div>
    <div>v1.2.0-beta.18</div>
    <div class="separator my-2"></div>
    <div>v1.2.0-beta.17</div>
    <div class="separator my-2"></div>
    <div>v1.2.0-beta.16</div>
    <div class="separator my-2"></div>
    <div>v1.2.0-beta.15</div>
    <div class="separator my-2"></div>
    <div>v1.2.0-beta.14</div>
    <div class="separator my-2"></div>
    <div>v1.2.0-beta.13</div>
    <div class="separator my-2"></div>
    <div>v1.2.0-beta.12</div>
    <div class="separator my-2"></div>
    <div>v1.2.0-beta.11</div>
    <div class="separator my-2"></div>
    <div>v1.2.0-beta.10</div>
    <div class="separator my-2"></div>
    <div>v1.2.0-beta.9</div>
    <div class="separator my-2"></div>
    <div>v1.2.0-beta.8</div>
    <div class="separator my-2"></div>
    <div>v1.2.0-beta.7</div>
    <div class="separator my-2"></div>
    <div>v1.2.0-beta.6</div>
    <div class="separator my-2"></div>
    <div>v1.2.0-beta.5</div>
    <div class="separator my-2"></div>
    <div>v1.2.0-beta.4</div>
    <div class="separator my-2"></div>
    <div>v1.2.0-beta.3</div>
    <div class="separator my-2"></div>
    <div>v1.2.0-beta.2</div>
    <div class="separator my-2"></div>
    <div>v1.2.0-beta.1</div>
    <div class="separator my-2"></div>
  </div>
</div>
 
<script>
  const translations = {
    ar: { dir: "rtl", tags: "العلامات" },
    he: { dir: "rtl", tags: "תגיות" },
    en: { dir: "ltr", tags: "Tags" },
  };
  window.addEventListener("message", (e) => {
    const t = translations[e.data?.lang];
    if (e.data?.type !== "sp-language" || !t) return;
    document.getElementById("scrollbar-rtl-demo").dir = t.dir;
    document.querySelectorAll("[data-i18n]").forEach((el) => {
      el.textContent = t[el.dataset.i18n];
    });
  });
</script>

CSS variables

Override the variables per element with an arbitrary property, or for the whole app with a CSS rule.

Variable	Default	Description
`--scrollbar-track`	`transparent`	Track color
`--scrollbar-thumb`	`var(--border)`	Thumb color
`--scrollbar-width`	`0.625rem` (`0.375rem` with `scrollbar-sm`)	Scrollbar thickness
`--scrollbar-radius`	`9999px`	Thumb corner radius

<div class="scrollbar [--scrollbar-thumb:var(--primary)] h-48 overflow-y-auto">
  Long content
</div>