Dashral Pro is on the wayGet 30% off at launch

Dashral

Marquee

Items that scroll on their own and loop without a seam: logos, testimonials, integrations, a news or price ticker — sideways or up.

$ pnpm dlx shadcn@latest add https://dashral.com/r/marquee.json

Trusted by 2,400 teams, from startups to the Fortune 500

AcmeGlobexInitechUmbrellaHooliStark LabsWayne & Co.Soylent

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/marquee.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json
{
  "registries": {
    "@dashral": "https://dashral.com/r/{name}.json"
  }
}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/marquee

Usage

example.tsx
import { Marquee } from "@/components/dashral/marquee"

<Marquee pauseOnHover fade aria-label="Customers">
  {["Acme", "Globex", "Initech", "Umbrella"].map((name) => (
    <span key={name} className="text-lg font-semibold">
      {name}
    </span>
  ))}
</Marquee>

Examples

Two rows, opposite ways

reverse runs a second row the other way, at its own speed.

StripeShopifyPostgresHubSpotSlackGoogle Ads
SegmentIntercomNotionSalesforceMailchimpZendesk

Testimonial cards

Any content works: here inset cards, stopping while you read one.

Acme

“We replaced three spreadsheets and a weekly meeting.”

Olivia MartinHead of Ops
Globex

“Set up in an afternoon. By Friday the whole team had it open.”

Liam JohnsonSales Lead
Initech

“I hear about a checkout drop before a customer emails us.”

Sofia DavisProduct Designer
Hooli

“The one dashboard people open without being reminded.”

Noah KimCOO
Umbrella

“Clean, fast, and it works on my phone in a taxi.”

Ava ChenFounder

Vertical columns

vertical scrolls up (down with reverse); give it a height. Each column at its own speed.

“The numbers are just there now.”
Olivia
“Our standup starts from the pipeline view.”
Liam
“Alerts beat our customers to it.”
Sofia
“Month-end close, two days faster.”
Budi
“Works on my phone in a taxi.”
Ava
“People open it without a reminder.”
Noah
“40 slides became one link.”
Emma
“First dashboard in three hours.”
Ethan
“Finance finally trusts a dashboard.”
Mia

Price ticker

A live label beside a strip of prices that rise and fall.

LIVE
MDSH$48.29+2.4%ACME$132.10-0.8%GLBX$76.55+1.2%INTC$31.90-2.1%HOOL$214.03+3.6%UMBR$18.44+0.4%STRK$97.12-1.5%

API reference

Marquee

Also takes every prop of <div>(opens in a new tab).

PropTypeDefault
childrenReactNode

The items; they're repeated as often as it takes to fill the strip. Required.

—
speednumber

Pixels per second.

40
reverseboolean

The other way: rightward (leftward in right-to-left text), or downward when vertical.

false
verticalboolean

Scrolls up instead of sideways. Give it a height.

false
pauseOnHoverboolean

Stops while the pointer is over it or focus is inside it.

false
fadeboolean

Fades the items out at both ends.

false
gapstring

Space between items, and between one copy of them and the next: any CSS length.

"1rem"
aria-labelstring

Names the strip (it becomes a region), e.g. "Customers".

—
classNames{ track?, group? }

Classes for the moving strip and each copy of the items.

—
classNamestring

Extra classes, merged with cn() so yours win.

—

Accessibility

  • The items are in the page once for screen readers and the keyboard: the copies that make the loop seamless are aria-hidden and inert.
  • With pauseOnHover it stops while focus is inside, so a link or button in it can be reached and read before it moves on.
  • Give it an aria-label when the items need a name as a group, e.g. a list of customers.

Motion

  • It moves at a constant speed, in pixels per second, by exactly one copy of the items, so the loop has no seam; it runs on the Web Animations API, with no CSS to add. With reduced motion it holds still and scrolls by hand.