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.

WebiOSAndroid4 style slots8 own props11 examples

Stories Source Tests Open in Storybook

import { Marquee } from "@knitui/components";

Playground

Loading playground…

orientationScroll axis — horizontal or vertical.

reverseReverse the scroll direction.

false

pauseOnHoverPause animation while the pointer is over the marquee (web only).

false

repeatNumber of times the children group is duplicated for seamless looping.

durationTime in ms for one full group to scroll past.

gapGap between repeated groups.

fadeEdges

false

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…

HorizontalSource Storybook

Vertical

Vertical scroll — orientation set to vertical.

Loading example…

VerticalSource Storybook

Reverse

Reverse direction — content scrolls right-to-left (or bottom-to-top).

Loading example…

ReverseSource Storybook

Shadows

The inherited shadow elevation prop, from xs to xl.

Loading example…

ShadowsSource Storybook

Pause On Hover

Pause on hover — animation freezes when the pointer enters the marquee.

Loading example…

Pause On HoverSource Storybook

Slow Speed

Slow speed — a long duration makes the scroll deliberate and easy to read.

Loading example…

Slow SpeedSource Storybook

Fast Speed

Fast speed — a short duration creates urgency or a ticker-tape effect.

Loading example…

Fast SpeedSource Storybook

Few Repeats

Custom repeat count — fewer copies (2) visible at once.

Loading example…

Few RepeatsSource Storybook

Styles

Per-slot styles targets individual parts — here the root frame and the text children.

Loading example…

StylesSource Storybook

Rich Content

Rich content — images, icons and multi-line cards scrolled as items.

Loading example…

Rich ContentSource Storybook

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	Usage
`content`	`styles={{ content: { … } }}`
`group`	`styles={{ group: { … } }}`
`root`	`styles={{ root: { … } }}`
`text`	`styles={{ 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.