Text Marquee

Marquee animated text for long texts on tiny screens

A very long text for a tiny screen

1
import { TextMarquee } from "@/components/ui/pxl/text-marquee";
2

3
export default function TextMarqueePreview() {
4
  return (
5
    <div className="w-full min-h-23 flex items-center justify-center">
6
      <div className="w-full max-w-2xs space-y-4">
7
        <TextMarquee className="italic">A very long text for a tiny screen</TextMarquee>
8
      </div>
9
    </div>
10
  );
11
}

Installation

Command
Manual

pnpm dlx shadcn@latest add pxl-ui/registry/text-marquee

Copy and paste the following code into your project.

1
import { cva, type VariantProps } from "class-variance-authority";
2
import type { PropsWithChildren } from "react";
3

4
const textMarqueeVariants = cva("inline-block whitespace-nowrap animate-marquee", {
5
  variants: {
6
    variant: {
7
      default:
8
        "text-foreground",
9
      muted: "text-muted-foreground",
10
      primary: "text-primary-foreground",
11
      success: "text-success-foreground",
12
      danger: "text-danger-foreground",
13
      warning: "text-warning-foreground",
14
      info: "text-info-foreground",
15
    },
16
    size: {
17
      default: "text-lg",
18
      xs: "text-base",
19
      sm: "text-lg",
20
      md: "text-2xl",
21
      lg: "text-4xl",
22
    },
23
    font: {
24
      default: "font-heading",
25
      heading: "font-heading",
26
      sans: "font-sans",
27
      mono: "font-mono"
28
    }
29
  },
30
  defaultVariants: {
31
    size: "default",
32
    font: "default",
33
    variant: "default",
34
  }
35
})
36

37
export function TextMarquee({
38
  children,
39
  className,
40
  ...props
41
}: VariantProps<typeof textMarqueeVariants> & PropsWithChildren & { className?: string; }) {
42
  return (
43
    <div className="@container w-full overflow-hidden">
44
      <span className={
45
        textMarqueeVariants({
46
          ...props,
47
          className: className
48
        })
49
      }>
50
        {children}
51
      </span>
52
    </div>
53
  );
54
}

Update the import paths to match your project setup.

Usage

import { TextMarquee } from "@/components/ui/pxl/text-marquee"

<div className="w-full max-w-2xs space-y-4">
  <TextMarquee>A very long text for a tiny screen</TextMarquee>
</div>