Marquee

Use Marquee for repeated content that can move through a bounded row, such as partner names or selected work. Keep the content understandable even when motion is disabled.

Preview

Reduce motion:Off

Tune:Off

Inspect

Next.jsReactTypeScriptTailwindMotion

Installation

Motion

npx shadcn@latest add @sona-ui/marquee

Basic usage

logo-marquee.tsx

import Marquee from "@/components/ui/marquee/marquee";
 
export function LogoMarquee() {
return <Marquee>Selected clients</Marquee>;
}

Examples

Adjust speed and direction to suit the row. Pause or reduce movement when the content needs close reading.

Usage


const TECH_STACK = [
  {
    name: "Next.js",
    icon: <NextjsIcon />,
  },
  {
    name: "React",
    icon: <ReactIcon />,
  },
  {
    name: "Typescript",
    icon: <TypescriptIcon />,
  },
  {
    name: "Tailwind CSS",
    icon: <TailwindIcon />,
  },
];
 
export default function MarqueeExample() {
  return (
    <Marquee speed={80} gap="4rem" direction="left" pauseOnHover>
      <div className="flex gap-x-8 items-center md:gap-x-16">
        {TECH_STACK.map((tech) => (
          <Icon key={tech.name} text={tech.name}>
            {tech.icon}
          </Icon>
        ))}
      </div>
    </Marquee>
  );
}
 
const Icon = ({ children, text }: { children: ReactNode; text: string }) => {
  return (
    <div className="flex gap-x-4 items-center shrink h-16">
      <span className="*:xl:h-16 *:xl:w-16">{children}</span>
      <span className="font-medium text-sm lg:text-lg">{text}</span>
    </div>
  );
};

API

Property	Type	Default	Description
`children`	`React.ReactNode`	`required`	Content of one marquee segment. Can be a single small element or a long strip.
`className`	`string`	`—`
`containerClassName`	`string`	`—`	Class for the outer clipping container.
`speed`	`number`	`80`	Scroll speed in pixels per second. Higher = faster.
`gap`	`string`	`"4rem"`	Gap between repeated segments, any CSS length string.
`direction`	`"left" \| "right" \| "up" \| "down"`	`"left"`	Scroll direction.
`scrollVelocity`	`boolean`	`false`	Multiply speed by scroll velocity (and flip direction on scroll-up).
`maxVelocity`	`number`	`5`	Max speed multiplier when scrollVelocity is enabled.
`pauseOnHover`	`boolean`	`false`	Pause (with easing, not a snap) on hover.
`repeat`	`number \| "auto"`	`"auto"`	How many segment copies to render. "auto" measures the container and fills 2× it.

Accessibility

Do not make movement the only way to access information. Provide readable static content when reduced motion is preferred.

Styling

Use className to control the row width, spacing, and visual treatment of its children.

Contact

Found a bug or need help using this component? Open an issue on GitHub.

License & Usage

Sona UI is available under the MIT license. You may use, modify, and distribute this component in personal and commercial projects.

Was this page helpful?

Your response helps us improve component docs.

Related components

Magnetic Button

Depth Tiles

new