Activity feed
Constrain a long list inside a dashboard panel.
Components / Layout
ScrollArea
A styled native scrolling viewport with reactive edge state.
Preview
Use cases
Horizontal gallery
Keep a strip of wide cards scrollable on small screens.
Usage example
Vue
<ScrollArea class="h-48">
<ScrollAreaViewport>
<div class="h-96">Scrollable content</div>
</ScrollAreaViewport>
</ScrollArea>More examples
Activity feed
The viewport preserves native scrolling behavior.
Activity feed
<script setup lang="ts">
import ScrollArea from './components/ui/scroll-area/ScrollArea.vue'
import ScrollAreaViewport from './components/ui/scroll-area/ScrollAreaViewport.vue'
const events = ['Created workspace', 'Invited Ada', 'Published report', 'Updated billing']
</script>
<template>
<ScrollArea class="h-48"><ScrollAreaViewport aria-label="Recent activity"><ul><li v-for="event in events" :key="event">{{ event }}</li></ul></ScrollAreaViewport></ScrollArea>
</template>Horizontal card strip
Choose horizontal orientation for wide content.
Horizontal card strip
<script setup lang="ts">
import ScrollArea from './components/ui/scroll-area/ScrollArea.vue'
import ScrollAreaViewport from './components/ui/scroll-area/ScrollAreaViewport.vue'
</script>
<template>
<ScrollArea orientation="horizontal" class="w-full"><ScrollAreaViewport aria-label="Featured projects">
<div class="flex w-max gap-4"><article v-for="n in 6" :key="n" class="w-48">Project {{ n }}</article></div>
</ScrollAreaViewport></ScrollArea>
</template>Key API
The most useful props, models, slots, events, and methods for this component.
| Name | Type | Default or requirement |
|---|---|---|
orientation | vertical | horizontal | both | vertical |
Native wheel, touch, keyboard, and momentum scrolling are preserved. The root exposes viewport, edges, and scrollTo().
Implementation notes
- Give the root an actual height or width constraint so overflow can occur.
- Use the exposed viewport and edge state when you need programmatic scrolling or fade affordances.
Accessibility and localization
- Native wheel, touch, and keyboard scrolling remain available; name a scrollable region when its purpose is unclear.