ReactVueAngularSvelteAstroNext.js
---
import { Marquee } from "@/components/ui/marquee"
const items = ["React", "Vue", "Angular", "Svelte", "Astro", "Next.js"]
---
<Marquee class="mask-x-from-95%">
{
items.map((item) => (
<span class="text-muted-foreground text-sm">{item}</span>
))
}
</Marquee>Installation
npx shadcn@latest add @fulldev/marqueeUsage
import { Marquee } from "@/components/ui/marquee"<Marquee>
<span>Design systems</span>
<span>Astro</span>
<span>Content sites</span>
</Marquee>The marquee duplicates its slot by default for a seamless loop.
<Marquee>
<span>Design systems</span>
<span>Astro</span>
<span>Content sites</span>
</Marquee>Examples
Seamless Loop
ReactVueAngularSvelteAstroNext.js
---
import { Marquee } from "@/components/ui/marquee"
const items = ["React", "Vue", "Angular", "Svelte", "Astro", "Next.js"]
---
<Marquee class="mask-x-from-95%">
{
items.map((item) => (
<span class="text-muted-foreground text-sm">{item}</span>
))
}
</Marquee>Direction
Control the scroll direction with the direction prop.
TypeScriptJavaScriptPythonGoRust
TypeScriptJavaScriptPythonGoRust
---
import { Marquee } from "@/components/ui/marquee"
const items = ["TypeScript", "JavaScript", "Python", "Go", "Rust"]
---
<div class="flex flex-col gap-8">
<Marquee class="mask-x-from-95%">
{
items.map((item) => (
<span class="text-muted-foreground text-sm">{item}</span>
))
}
</Marquee>
<Marquee class="mask-x-from-95%" direction="right">
{
items.map((item) => (
<span class="text-muted-foreground text-sm">{item}</span>
))
}
</Marquee>
</div>Pause on Hover
Enable pause on hover with the pauseOnHover prop.
Tailwind CSSBootstrapSassPostCSS
---
import { Marquee } from "@/components/ui/marquee"
const items = ["Tailwind CSS", "Bootstrap", "Sass", "PostCSS"]
---
<Marquee class="mask-x-from-95%" pauseOnHover>
{
items.map((item) => (
<span class="text-muted-foreground text-sm">{item}</span>
))
}
</Marquee>Styling
Set infinite={false} when you only want to render the slot once.
API Reference
See the GitHub source code for more information on props.