GitHub55X

Scroll Area

Vue scroll area with custom scrollbars for overflowing content in panels and sidebars.

API Reference
PreviousNext

Installation

Install from the Vuzeno registry:

      
      bunx --bun shadcn-vue@latest add https://vuzeno.com/r/scroll-area.json

Usage

      
      <script setup lang="ts">
import { ScrollArea } from "@/components/ui/scroll-area";
</script>

<template>
  <ScrollArea.Root>
    <ScrollArea.Viewport>
      <ScrollArea.Content>
        <!-- … -->
      </ScrollArea.Content>
    </ScrollArea.Viewport>
    <ScrollArea.Scrollbar>
      <ScrollArea.Thumb />
    </ScrollArea.Scrollbar>
    <ScrollArea.Corner />
  </ScrollArea.Root>
</template>

Composition

      
      ScrollArea.Root
├── ScrollArea.Shadow
├── ScrollArea.Viewport
│   └── ScrollArea.Content
├── ScrollArea.Scrollbar
│   └── ScrollArea.Thumb
└── ScrollArea.Corner

Examples

Horizontal

Configure the scroll area for horizontal scrolling only.

Both Directions

Enable scrolling in both horizontal and vertical directions.

Nested

Scroll areas can be nested within each other for complex layouts.

Shadow

Add scroll shadows to indicate hidden content. Place ScrollArea.Shadow inside ScrollArea.Root with a side of top, bottom, left, or right. The root needs relative positioning.

API

See Ark UI Scroll Area docs for full props and examples.

Rating GroupScrollSpy