Vibe UI
Initializing Vibe UI System...
Vibe UI

Scroll Area

A custom, uniform styled scrollbar viewport layout wrapper.

Scroll Area

A custom, uniform styled scrollbar viewport layout wrapper.

Preview

Scrollable logs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.

Installation

pnpm dlx vibe-ui-kit@latest add scroll-area

Preset Variations

Glassmorphic

Semi-transparent glass tracking handles and tracks with custom blur backdrops.

Retro Neobrutalism

Thick solid boxy brutalist offset handle scrollers.

Neon Glow

Neon glowing track scroll highlights active indicators.

Premium Use Case Examples

1. Horizontal Cards Scroller

Item Card 1
Item Card 2
Item Card 3
Item Card 4
Item Card 5

2. Dual Direction Grid Scroller

Scrolling in both horizontal and vertical directions works seamlessly with custom tracking bars.

3. Chat conversation stream layout

Hello! Is this the new Vibe UI scroll component?
Yes! Built on radix primitives.
Looks awesome and super smooth.

4. Custom sidebar links catalog

5. Shopping checkout bag items lists

Button Component
Qty: 1
$15.00
Glassmorphic Card
Qty: 1
$20.00
Calendar Widget
Qty: 1
$25.00
Carousel Slider
Qty: 1
$30.00

6. Code CLI setup terminal logs

$ npx vibe-ui-kit add calendar
✓ Resolving component "calendar"...
✓ Created calendar.tsx at /components/ui
⚠ Peer dependencies detected: react-day-picker
$ pnpm install react-day-picker
✓ Installed dependencies successfully.

Contributors

JS
Jenish Sabhadiya

Theme Customizer

8px
@theme {
  --radius: 0.5rem;
  --glass-blur: 8px;
}
Changes apply instantly to this documentation workspace.
Scroll Area | Vibe UI