Scroll Area
Augments native scroll functionality for custom, cross-browser styling.
Installation
npx shadcn-vue@latest add https://vuedocs.canceydejean.dev/r/scroll-area.jsonUsage
Use scroll area when you need a scrollable region with a custom, consistently-styled scrollbar instead of relying on the browser's native one — useful for lists, menus, and long content inside constrained containers.
<script setup lang="ts">
import { ScrollArea } from "@/components/ui/scroll-area";
const tags = Array.from({ length: 20 }, (_, index) => `Tag ${index + 1}`);
</script>
<template>
<ScrollArea class="h-72 w-48 rounded-md border">
<div class="p-4">
<h4 class="mb-4 text-sm font-medium">Tags</h4>
<div v-for="tag in tags" :key="tag" class="text-sm">
{{ tag }}
</div>
</div>
</ScrollArea>
</template>
Built on reka-ui's ScrollArea primitive.