Scroll Area

A scrolling region with a scrollbar that matches the theme.

Components

Accordion

Alert

Avatar

Badge

Breadcrumb

Button

Card

Checkbox

Command

Dialog

Field

Input

Popover

Select

Table

Tabs

Installation

uvx django_shadcn@latest add scroll_area

Usage

Give the scroll area a height and let the content run past it. The scrollbar picks up the border colour from the palette, so it stops looking like a piece of the operating system that wandered in.

<c-scroll-area class="h-32 w-[320px] rounded-md border">
    <p class="p-4">...</p>
</c-scroll-area>

The size goes on the component; the content inside is free to be taller.

Examples

Horizontal

One

Two

Three

Four

<c-scroll-area class="w-[320px] rounded-md border">
    <div class="flex w-max gap-4 p-4">
        <div class="size-24 shrink-0 rounded-md bg-muted"></div>
    </div>
</c-scroll-area>

Notes

Radix hides the native scrollbar and draws its own with JavaScript, which is how it gets the same thin bar everywhere. Here the native scrollbar is styled instead: momentum scrolling and the platform behaviour stay intact, and the trade is that Firefox only honours the width and the colour, not the rounded thumb.