A box that scrolls, with the two things a hand-written one leaves out.
Import it from rei-kit:
import { ScrollArea } from 'rei-kit'
Open ScrollArea in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.
<script setup lang="ts">
import { ScrollArea } from 'rei-kit'
const MONTHS = [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December',
]
</script>
<template>
<!-- Nothing inside takes focus, so this becomes a named focus stop on its
own and the far end stays reachable with a keyboard. -->
<ScrollArea axis="x" scrollbar="hidden" label="The year so far" class="max-w-sm">
<p class="flex gap-3 whitespace-nowrap">
<span v-for="month in MONTHS" :key="month" class="text-ink-soft text-sm">{{ month }}</span>
</p>
</ScrollArea>
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
label | string | yes | Names the box, e.g. "Categories". Required because this becomes a region a reader can land in, and an unnamed region is announced as nothing at all. It is only used when that happens, so it costs nothing in the common case. |
axis | 'x' | 'y' | 'both' | 'y' | Which way it scrolls. |
scrollbar | 'auto' | 'hidden' | 'auto' | `hidden` takes the native bar away; the fades stay either way. |
fade | boolean | true | The gradient at an edge with more content past it. |
drag | boolean | false | Drag to scroll sideways, for a page that has claimed horizontal gestures. |
rei-kit is an accessible Vue 3 and Tailwind CSS 4 component library: 106 components, themed by role rather than by colour on three independent axes — ten WCAG-checked palettes, four materials and light or dark, each switched with one attribute. Typed, tested, SSR-safe, no runtime dependencies, MIT.