Marquee Grid

New

Rows of cards drifting sideways, each at its own pace

$ npx @hritik-sharmaa/repeat-ui add grid-marquee-grid

Live preview

ButtonsCardsCarouselsText effectsGridsCursorsDocksTogglesTabsPalettesTimelinesGalleries

Text effectsGridsCursorsDocksTogglesTabsPalettesTimelinesGalleriesButtonsCardsCarousels

DocksTogglesTabsPalettesTimelinesGalleriesButtonsCardsCarouselsText effectsGridsCursors

Customize

Rows3

Speed40s

Gap12px

Pause on hover

Cards

Text

Dots

import GridMarqueeGrid from "@/components/repeat-ui/grid-marquee-grid/preview";

<GridMarqueeGrid />

Installation

Run the command
Adds the files and installs any packages they need. Works with npm, pnpm, yarn and bun.
$ npx @hritik-sharmaa/repeat-ui add grid-marquee-grid --variant ts-tailwind

The files are in components/repeat-ui/grid-marquee-grid/.

import GridMarqueeGrid from "@/components/repeat-ui/grid-marquee-grid/preview";

export default function Page() {
  return <GridMarqueeGrid />;
}

Prop	Type	Default	Description
`items`	`ReactNode[]`	12 component names	Cards to scroll.
`rows`	`number`	3	Number of rows.
`speed`	`number`	40	Seconds for the first row to loop; each row below is slower.
`gap`	`number`	12	Space between cards and rows, in pixels.
`pauseOnHover`	`boolean`	true	Stop a row while the pointer is over it.
`cardColor`	`string`	"#171717"	Card background.
`textColor`	`string`	"#e5e5e5"	Card text colour.
`accentColor`	`string`	"#fa5f1b"	Dot colour.
`className`	`string`	""	Extra classes for the root element.