SurfacesNew
Glass Scroll Area
A scroll container with a thin glass scrollbar that shows on hover and while scrolling.
Preview
Demos ready. Update 0.
Installation
For React 19+ apps with Tailwind CSS 4.
npx shadcn@4.14.1 add https:/Adds 5 files to components/glassyui and installs @radix-ui/react-scroll-area and clsx.
Usage
Usage
import { GlassScrollArea } from "@/components/glassyui/glass-scroll-area";
export function ReleaseNotes({ notes }: { notes: string[] }) {
return (
<GlassScrollArea
className="h-64"
viewportProps={{ "aria-label": "Release notes", role: "region", tabIndex: 0 }}
>
<ul className="space-y-3 p-4">
{notes.map((note) => (
<li key={note}>{note}</li>
))}
</ul>
</GlassScrollArea>
);
}Examples
Grow to a maximum height
<GlassScrollArea className="max-h-80">{children}</GlassScrollArea>Scroll sideways
<GlassScrollArea scrollbars="horizontal">
<div className="flex w-max gap-3">{cards}</div>
</GlassScrollArea>Show the scrollbar whenever the content overflows
<GlassScrollArea type="auto" className="h-64">{children}</GlassScrollArea>API reference
GlassScrollArea
A div whose viewport scrolls natively, with glass scrollbars in place of the system's.
| Prop | Type | Default | Description |
|---|---|---|---|
scrollbars | 'vertical' | 'horizontal' | 'both' | 'vertical' | Which scrollbars to draw. |
type | 'hover' | 'scroll' | 'auto' | 'always' | 'hover' | When a scrollbar shows: on hover and while scrolling, only while scrolling, whenever the content overflows, or always. |
scrollHideDelay | number | 600 | Milliseconds a scrollbar stays after the pointer leaves or scrolling stops. |
viewportProps | ScrollAreaViewportProps | None | Props for the element that scrolls, such as a ref, role or aria-label. |
Also accepts HTML div attributes.
- Types
GlassScrollAreaProps- Accessibility
- When the content holds no links or controls, pass tabIndex={0}, role="region" and an aria-label in viewportProps so keyboard users can scroll it.