The Marquee component scrolls its children in a seamless, infinite loop, with pause-on-hover and faded edges.
Add it with the CLI, open it in v0, or copy the source into your project.
Adds the component and installs its dependencies for you.
npx shadcn@latest add https://uibeats.com/r/marquee.jsonEverything Marquee accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
| children (required) | React.ReactNode | No default | Content to scroll; it is rendered twice to form the loop |
| speed | number | 60 | Pixels travelled per second |
| direction | 'left' | 'right' | 'left' | Direction of travel |
| pauseOnHover | boolean | true | Pause while the pointer is over the marquee |
| fadeEdges | boolean | true | Fade the leading and trailing edges into the background |
| className | string | '' | Additional CSS classes for the container |
Required.