Scroll Area

Augments native scroll functionality for custom, cross-browser styling.

This ScrollAreaBlock provides a beautiful, native-feeling scrollbar that works seamlessly across Webkit browsers (Chrome, Safari, Edge) and Firefox. It uses pure CSS and avoids heavy third-party dependencies while allowing deep theme integration.

Give the block a height or width constraint and it takes over the scrollbar styling from there — same rendering in Webkit and Firefox.

Scroll area

The styled scrollbar is scoped to a generated class, so global scrollbars are untouched.

className: is where the height or width constraint goes — without one there is nothing to scroll.

Accent Color

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Scroll Area

npx shadcn@latest add @algorize-ui/scroll-area

components/custom/blocks/ScrollAreaBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Nothing beyond the shared setup — Scroll Area needs only the cn helper and lucide-react, which the installation guide already put in place.

Examples

Horizontal

Setorientation"horizontal": to apply the matching overflow utilities and move the bar to the bottom edge. The inner row needs w-max to overflow.
wheelToHorizontal{true}: is on by default here: a mouse wheel pans the row left and right. Once the row hits either end the wheel scrolls the page again.

Both axes

Setorientation"both": to render and style a scrollbar on each axis.

Minimal

Setvariant"minimal": to slim the thumb down for dense UI.

Glass

Setvariant"glass": to tint the bar for use over frosted surfaces.

Auto-hide

SetautoHide: to fade the thumb out until the container is hovered or scrolled.
hideTrack: removes the groove behind the thumb entirely.

Features

Explore the Scroll Area's custom scrollbar features, providing a unified, stylized scrolling experience across all operating systems.

Customizable

Easily adapt the component's styling and behavior to fit your application's unique design system.

Accessible

Built with accessibility in mind, ensuring all users can interact with your application effectively.

Responsive

Fully responsive design that looks and works great across desktop, tablet, and mobile devices.

Performant

Optimized for maximum performance with minimal re-renders and efficient state management.

Best Practices & Guidelines

Usage Guidelines

Follow standard design principles when implementing this component. Ensure proper contrast, spacing, and context within your layout.

Props Reference

Component	Prop	Type	Default	Description
`ScrollAreaBlock`	`variant`	`"default" \| "minimal" \| "glass"`	`"default"`	Determines the architectural style and thickness of the scroll track and thumb.
`ScrollAreaBlock`	`color`	`"indigo" \| "rose" \| "emerald" \| "zinc" \| string`	`"primary"`	The color of the scrollbar thumb and hover states. Fully supports dynamic custom hex codes.
`ScrollAreaBlock`	`orientation`	`"vertical" \| "horizontal" \| "both"`	`"vertical"`	Defines which axis should be scrollable. This automatically applies the correct CSS overflow utilities.
`ScrollAreaBlock`	`hideTrack`	`boolean`	`false`	If true, forces the background scroll track to be completely transparent, showing only the thumb.
`ScrollAreaBlock`	`autoHide`	`boolean`	`false`	If true, the scrollbar thumb fades to transparent when the container is not being actively hovered.
`ScrollAreaBlock`	`wheelToHorizontal`	`boolean`	`true`	`orientation="horizontal"` only. A mouse wheel pans the content sideways; trackpad swipes and shift+wheel keep their native behaviour, and the wheel is handed back to the page at either end.