Marquee

Loops a row of items slowly across its width, so a long list shows without taking room.

Configurations

Supported configurations for this component.

3 examples

Default

Reverse

No fade

One command adds this component to your project.

Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.

npx shadcn@latest add @aicanvas/••••••••••••

Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").

Every prop this component accepts. Any other prop is forwarded to the underlying element.

Prop	Type	Default	Description
childrenreq	`React.ReactNode`	-	The items. Each child becomes one list item, and the whole set renders once per run.
duration	`number`	52	Seconds for one full pass. The default is the system's one sanctioned non-token duration.
pauseOnHover	`boolean`	true	Hovering glides the track to a stop and leaving glides it back up to speed.
reverse	`boolean`	false	Runs left to right instead of right to left.
fade	`boolean`	true	Both ends dissolve into the page through a mask.
gap	`number`	-	A spacing step (`tokens.spacing` key) padded on each side of every item, so two items sit twice this apart. Unset, it is 48px on desktop and 32px from the md breakpoint down.
separator	`boolean\|React.ReactNode`	false	`true` draws the short slanted hairline between items; a node draws that node instead, centred on the boundary.
aria-label	`string`	-	Names the list of items for assistive tech (or use aria-labelledby).

Presents an item on its own artwork, for content the image identifies.

Shows one turn of a conversation, from the user or from the assistant, with its actions.

Builds a table row by row, for cells that need their own structure.