Marquee Demo 1

nyxui/marquee-demo1

FreeExample

Example showing a marquee.

Live preview

live · rendered by the registry

Rendered by shadcn/ui on their own page — this is the component running, not a screenshot of it.

Install it

npx shadcn@latest add https://nyxui.com/r/marquee-demo1.json

Source

registry/example/marquee-demo1.tsxnyxui.com/r/marquee-demo1.json

1import React from "react";
2import { Marquee } from "../ui/marquee";
3import Image from "next/image";
4 
5export default function MarqueeDemo1() {
6  return (
7    <div className="flex h-[400px] space-x-4">
8      <Marquee direction="vertical">
9        <Image
10          src="https://raw.githubusercontent.com/MihirJaiswal/hero-hq/refs/heads/main/public/icons/Vector.png"
11          alt="avenger logo"
12          width={120}
13          height={120}
14          quality={100}
15          loading="lazy"
16          className="aspect-square w-[120px] rounded-full"
17        />
18        <Image
19          src="https://raw.githubusercontent.com/MihirJaiswal/hero-hq/refs/heads/main/public/icons/batman.png"
20          alt="batman logo"
21          width={120}
22          height={120}
23          quality={100}
24          loading="lazy"
25          className="aspect-square w-[120px] rounded-full"
26        />
27        <Image
28          src="https://raw.githubusercontent.com/MihirJaiswal/hero-hq/refs/heads/main/public/icons/blackpanther.png"
29          alt="black panther logo"
30          width={120}
31          height={120}
32          quality={100}
33          loading="lazy"
34          className="aspect-square w-[120px] rounded-full"
35        />
36        <Image
37          src="https://raw.githubusercontent.com/MihirJaiswal/hero-hq/refs/heads/main/public/icons/captainamerica.png"
38          alt="captain america logo"
39          width={120}
40          height={120}
41          quality={100}
42          loading="lazy"
43          className="aspect-square w-[120px] rounded-full"
44        />
45        <Image
46          src="https://raw.githubusercontent.com/MihirJaiswal/hero-hq/refs/heads/main/public/icons/daredevil.png"
47          alt="daredevil logo"
48          width={120}
49          height={120}
50          quality={100}
51          loading="lazy"
52          className="aspect-square w-[120px] rounded-full"
53        />
54        <Image
55          src="https://raw.githubusercontent.com/MihirJaiswal/hero-hq/refs/heads/main/public/icons/deadpool.png"
56          alt="deadpool logo"
57          width={120}
58          height={120}
59          quality={100}
60          loading="lazy"
61          className="aspect-square w-[120px] rounded-full"
62        />
63      </Marquee>
64      <Marquee direction="vertical" reverse>
65        <Image
66          src="https://raw.githubusercontent.com/MihirJaiswal/hero-hq/refs/heads/main/public/icons/flash.png"
67          alt="flash logo"
68          width={120}
69          height={120}
70          quality={100}
71          loading="lazy"
72// … truncated

What it pulls in

Other registry items

https://nyxui.com/r/marquee.json

Files it writes

registry/example/marquee-demo1.tsx

More from shadcn/ui

All 68 items

Same registry, same kind — the ones you would have found next
Component	Registry	Kind	Access	Installs
3D Layered Card Demo3d-layered-card-demo	shadcn/ui	Examples	Free	no deps
Animated Code Block Demoanimated-code-block-demo	shadcn/ui	Examples	Free	no deps
Animated Grainy Background Demoanimated-grainy-bg-demo	shadcn/ui	Examples	Free	no deps
Animated Text Demoanimated-text-demo	shadcn/ui	Examples	Free	no deps
Apple Glass Effect Demoapple-glass-effect-demo	shadcn/ui	Examples	Free	no deps
Bubble Background Demobubble-background-demo	shadcn/ui	Examples	Free	no deps
Custom Cursor Democustom-cursor-demo	shadcn/ui	Examples	Free	no deps
Cyberpunk Card Democyberpunk-card-demo	shadcn/ui	Examples	Free	no deps