A row that scrolls sideways without end: logos, testimonials, a ticker.
Import it from rei-kit/motion:
import { BaseMarquee } from 'rei-kit/motion'
Open BaseMarquee 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 { BaseBadge } from 'rei-kit'
import { BaseMarquee } from 'rei-kit/motion'
const names = ['Nord', 'Dracula', 'Catppuccin', 'Gruvbox']
</script>
<template>
<BaseMarquee :duration="40">
<BaseBadge v-for="name in names" :key="name">{{ name }}</BaseBadge>
</BaseMarquee>
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
duration | number | 30 | Seconds for one full pass. Longer is slower; the speed does not change with the content's length. |
reverse | boolean | false | Move left to right instead. |
paused | boolean | false | Holds it still. |
fade | boolean | true | Fade the content out at both edges instead of cutting it. |
gap | string | '2rem' | Space between items, and between the end of one pass and the start of the next. Any CSS length. |
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.