Marquee

Renders a looping marquee animation with horizontal or vertical scrolling. Supports adjustable speed, direction, repeat count, and pause on hover.

marquee-01

ReactNext.jsTypeScriptTailwind CSSFramer MotionRadix UILucide Iconsshadcn/ui

import { Marquee } from "@/components/ui/marquee"
import { Badge } from "@/components/ui/badge"

const technologies = [
  { name: "React", color: "bg-blue-500" },
  { name: "Next.js", color: "bg-black" },
  { name: "TypeScript", color: "bg-blue-600" },
  { name: "Tailwind CSS", color: "bg-cyan-500" },
  { name: "Framer Motion", color: "bg-pink-500" },
  { name: "Radix UI", color: "bg-green-500" },
  { name: "Lucide Icons", color: "bg-orange-500" },
  { name: "shadcn/ui", color: "bg-purple-500" },
]

export function DemoOne() {
  return (
    <div className="flex h-80 w-full items-center justify-center overflow-hidden border">
      <main className="flex flex-col gap-2">
        <Marquee speed={"slow"}>
          {technologies.map((tech, index) => (
            <Badge key={index} className={`${tech.color} px-4 py-1 text-white`}>
              {tech.name}
            </Badge>
          ))}
        </Marquee>
        <Marquee speed={"normal"}>
          {technologies.map((tech, index) => (
            <Badge key={index} className={`${tech.color} px-4 py-1 text-white`}>
              {tech.name}
            </Badge>
          ))}
        </Marquee>
        <Marquee speed={"fast"}>
          {technologies.map((tech, index) => (
            <Badge key={index} className={`${tech.color} px-4 py-1 text-white`}>
              {tech.name}
            </Badge>
          ))}
        </Marquee>
        <Marquee speed={6}>
          {technologies.map((tech, index) => (
            <Badge key={index} className={`${tech.color} px-4 py-1 text-white`}>
              {tech.name}
            </Badge>
          ))}
        </Marquee>
      </main>
    </div>
  )
}

marquee-02

import {
  ClaudeAIWordmark,
  CursorWordmark,
  GithubWordmark,
  GoogleWordmark,
  GrokWordmark,
  OpenAIWordmark,
  ReplicateWordmark,
} from "@designali/logos"

import { Marquee } from "@/components/ui/marquee"

export function DemoOne() {
  return (
    <div className="flex h-80 w-full items-center justify-center overflow-hidden border">
      <main className="w-full">
        <Marquee gap={"80px"} speed={25} fade={true}>
          <OpenAIWordmark size={100} />
          <ClaudeAIWordmark size={100} />
          <ReplicateWordmark size={100} />
          <CursorWordmark size={100} />
          <GithubWordmark size={100} />
          <GrokWordmark size={100} />
          <GoogleWordmark className="mr-20" size={100} />
        </Marquee>
      </main>
    </div>
  )
}

marquee-03

ReactNext.jsTypeScriptTailwind CSSFramer MotionRadix UILucide Iconsshadcn/ui

import { Marquee } from "@/components/ui/marquee"
import { Badge } from "@/components/ui/badge"

const technologies = [
  { name: "React", color: "bg-blue-500" },
  { name: "Next.js", color: "bg-black" },
  { name: "TypeScript", color: "bg-blue-600" },
  { name: "Tailwind CSS", color: "bg-cyan-500" },
  { name: "Framer Motion", color: "bg-pink-500" },
  { name: "Radix UI", color: "bg-green-500" },
  { name: "Lucide Icons", color: "bg-orange-500" },
  { name: "shadcn/ui", color: "bg-purple-500" },
]

export function DemoOne() {
  return (
    <div className="flex h-80 w-full items-center justify-center overflow-hidden border">
      <main>
        <Marquee vertical gap={6} delay={2}>
          {technologies.map((tech, index) => (
            <Badge
              key={index}
              className={`${tech.color} px-4 py-1 text-white last:mb-2`}
            >
              {tech.name}
            </Badge>
          ))}
        </Marquee>
      </main>
    </div>
  )
}

marquee-04

ReactNext.jsTypeScriptTailwind CSSFramer MotionRadix UILucide Iconsshadcn/ui

import { Marquee } from "@/components/ui/marquee"
import { Badge } from "@/components/ui/badge"

const technologies = [
  { name: "React", color: "bg-blue-500" },
  { name: "Next.js", color: "bg-black" },
  { name: "TypeScript", color: "bg-blue-600" },
  { name: "Tailwind CSS", color: "bg-cyan-500" },
  { name: "Framer Motion", color: "bg-pink-500" },
  { name: "Radix UI", color: "bg-green-500" },
  { name: "Lucide Icons", color: "bg-orange-500" },
  { name: "shadcn/ui", color: "bg-purple-500" },
]

export function DemoOne() {
  return (
    <div className="flex h-80 w-full items-center justify-center overflow-hidden border">
      <main className="">
        <Marquee autoFill speed="fast" pauseOnHover reverse>
          {technologies.map((tech, index) => (
            <Badge
              key={index}
              className={`${tech.color} px-4 py-2 text-white last:mr-2`}
            >
              {tech.name}
            </Badge>
          ))}
        </Marquee>
      </main>
    </div>
  )
}

marquee-05

import {
  ClaudeAI,
  Cursor,
  Github,
  GoogleWordmark,
  Grok,
  OpenAI,
  Replicate,
} from "@designali/logos"

import { Marquee } from "@/components/ui/marquee"
import { Badge } from "@/components/ui/badge"

const technologies = [
  { name: "chat", image: "/img/chat-1-light.jpg" },
  { name: "dashboard", image: "/img/dashboard-1-dark.jpg" },
  { name: "hero1", image: "/img/hero-1.jpg" },
  { name: "login", image: "/img/login-1.jpg" },
  { name: "hero2", image: "/img/hero-2.jpg" },
]


export function DemoOne() {
  return (
    <div className="flex h-80 w-full items-center justify-center overflow-hidden border">
      <main className="w-full space-y-12">
        <Marquee>
          {technologies.map((tech, index) => (
            <div key={`${tech.name}-${index}`} className="py-2">
              <img
                className="mx-auto h-60 border object-contain w-auto"
                src={tech.image}
                alt={tech.name}
              />
            </div>
          ))}
        </Marquee>
      </main>
    </div>
  )
}

Installation


pnpm dlx shadcn@latest add https://aliimam.in/r/marquee.json

Usage

import { Marquee } from "@/components/marquee"

// Basic
<Marquee>
  <div>Item 1</div>
  <div>Item 2</div>
</Marquee>
 
// With fade and custom speed
<Marquee speed={25} fade={true} gap="20px">
  <img src="logo1.png" />
  <img src="logo2.png" />
</Marquee>
 
// Vertical with delay
<Marquee vertical delay={2} pauseOnHover>
  <Card>Content</Card>
</Marquee>
 
// Auto-fill responsive
<Marquee autoFill speed="slow" reverse>
  <Badge>Tag</Badge>
</Marquee>

CSS

@import "tailwindcss";
@import "tw-animate-css";
 
@theme inline {
  --animate-marquee: marquee var(--duration) infinite linear;
  --animate-marquee-vertical: marquee-vertical var(--duration) linear infinite;
}
 
 
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - var(--gap)));
  }
}
 
@keyframes marquee-vertical {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(calc(-100% - var(--gap)));
  }
}

Props

Prop	Type	Default
`children`	`React.ReactNode`	—
`className`	`string`	—
`reverse`	`boolean`	`false`
`pauseOnHover`	`boolean`	`false`
`vertical`	`boolean`	`false`
`repeat`	`number`	`5`
`speed`	`"slow" \| "normal" \| "fast"`	`normal`

Grid Pattern Typewriter