Data Display@knitui/components
Marquee
Marquee continuously scrolls its children in a seamless loop. Motion is driven cross-platform (no web-only keyframes). Supports horizontal and vertical orientations, reverse direction, configurable speed, and optional hover-pause.
import { Marquee } from "@knitui/components";Playground
Loading playground…
<Marquee
reverse={false}
pauseOnHover={false}
repeat={4}
duration={8000}
orientation="horizontal"
gap="$md"
>
<TagList />
</Marquee>Examples
Horizontal
Horizontal scroll — the default orientation.
Loading example…
Vertical
Vertical scroll — orientation set to vertical.
Loading example…
Reverse
Reverse direction — content scrolls right-to-left (or bottom-to-top).
Loading example…
Shadows
The inherited shadow elevation prop, from xs to xl.
Loading example…
Pause On Hover
Pause on hover — animation freezes when the pointer enters the marquee.
Loading example…
Slow Speed
Slow speed — a long duration makes the scroll deliberate and easy to read.
Loading example…
Fast Speed
Fast speed — a short duration creates urgency or a ticker-tape effect.
Loading example…
Few Repeats
Custom repeat count — fewer copies (2) visible at once.
Loading example…
Styles
Per-slot styles targets individual parts — here the root frame and the text children.
Loading example…
Rich Content
Rich content — images, icons and multi-line cards scrolled as items.
Loading example…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Content to scroll. |
disabled system | boolean | undefined | — | — |
duration | number | undefined | 100000 | Time in ms for one full group to scroll past. |
fadeEdgeColor | string | undefined | — | Fade gradient color — deferred (see {@link MarqueeProps.fadeEdges}). |
fadeEdges | boolean | undefined | true | Show a gradient fade on the edges. Kept for Mantine API parity but currently a no-op — a cross-platform linear-gradient primitive is not available. |
fadeEdgeSize | string | undefined | — | Fade gradient size — deferred (see {@link MarqueeProps.fadeEdges}). |
pauseOnHover | boolean | undefined | false | Pause animation while the pointer is over the marquee (web only). |
repeat | number | undefined | 4 | Number of times the children group is duplicated for seamless looping. |
reverse | boolean | undefined | false | Reverse the scroll direction. |
shadow system | "xs" | "sm" | "md" | "lg" | "xl" | "xxs" | "xxl" | undefined | — | — |
styles system | SlotStyles<MarqueeStyles> | undefined | — | Per-slot style sugar — props spread onto the matching styled part. |
theme system | ThemeName | null | undefined | — | Applies a theme to this element |
Style slots
Every part of Marquee can be styled through the styles prop. Explicit props on the component always win over slot styles.
| Slot | Targets |
|---|---|
content | Props for the translated track (Marquee.Content). |
group | Props for each repeated group (Marquee.Group). |
root | Props for the clipping frame (Marquee.Frame). |
text | Props for text children (Marquee.Text). |
Accessibility & DOM props (2)
| Prop | Type |
|---|---|
key | Key | null | undefined |
ref | Ref<TamaguiElement> | undefined |
Plus 498 inherited style props from Box — the full Tamagui/React Native style surface, including token shorthands like p, mx, bg and c. See Tokens for the scales they accept, or the full list.