shadcn-html / scroll-area
Built with: CSS
Scroll Area
Scrollable container with custom-styled thin scrollbars.
Default
Tags
v1.0.0-alpha
v0.9.0
v0.8.2
v0.8.1
v0.8.0
v0.7.0
v0.6.0
v0.5.0
v0.4.0
v0.3.0
<div class="scroll-area" style="height:12rem;">
<!-- long content -->
</div>
CSS view file
Styles for the scroll-area component. Uses design tokens for colors, spacing, and radius.
@layer components {
.scroll-area {
overflow: auto;
position: relative;
overscroll-behavior: contain;
scrollbar-gutter: stable;
/* Webkit custom scrollbar */
&::-webkit-scrollbar { width: 6px; height: 6px; }
&::-webkit-scrollbar-track { background: transparent; }
&::-webkit-scrollbar-thumb {
background-color: var(--border);
border-radius: 3px;
&:hover { background-color: var(--muted-foreground); }
}
/* Standard scrollbar */
scrollbar-width: thin;
scrollbar-color: var(--border) transparent;
}
}