Search

Search the site

TT-UI
All components

Infinite Card Marquee

A component for displaying cards in a continuous scrolling carousel. Powers the testimonial-row-01 block at /blocks/testimonial-row-01.

Horizontal
Default left-scrolling row with pause and scale on hover.
Web Development
Modern frontend solutions

Our team specializes in building responsive and accessible web applications using the latest technologies.

ReactNext.js
Mobile Apps
Cross-platform development

We create native-like mobile experiences that work seamlessly across both iOS and Android platforms.

React NativeFlutter
Backend Services
Scalable API solutions

Our backend services are built to scale, with robust APIs and efficient database designs.

Node.jsPython
DevOps
CI/CD and deployment

We implement automated testing and deployment pipelines to ensure consistent and reliable software delivery.

DockerKubernetes
UI/UX Design
User-centered interfaces

Our design team creates intuitive and visually appealing interfaces with a focus on user experience.

FigmaAdobe XD
Web Development
Modern frontend solutions

Our team specializes in building responsive and accessible web applications using the latest technologies.

ReactNext.js
Mobile Apps
Cross-platform development

We create native-like mobile experiences that work seamlessly across both iOS and Android platforms.

React NativeFlutter
Backend Services
Scalable API solutions

Our backend services are built to scale, with robust APIs and efficient database designs.

Node.jsPython
DevOps
CI/CD and deployment

We implement automated testing and deployment pipelines to ensure consistent and reliable software delivery.

DockerKubernetes
UI/UX Design
User-centered interfaces

Our design team creates intuitive and visually appealing interfaces with a focus on user experience.

FigmaAdobe XD
1"use client";
2

3import { Badge } from "@/components/ui/badge";
4import { CardItem, InfiniteCardMarquee } from "@/registry/ui";
5

6export const horizontalCards: CardItem[] = [
7  {
8    id: 1,
9    title: "Web Development",
10    description: "Modern frontend solutions",
11    content: (
12      <div className="p-2">
13        <p className="text-sm">
14          Our team specializes in building responsive and accessible web
15          applications using the latest technologies.
16        </p>
17      </div>
18    ),
19    footer: (
20      <div className="flex w-full justify-between">
21        <Badge variant="outline">React</Badge>
22        <Badge variant="outline">Next.js</Badge>
23      </div>
24    ),
25  },
26  {
27    id: 2,
28    title: "Mobile Apps",
29    description: "Cross-platform development",
30    content: (
31      <div className="p-2">
32        <p className="text-sm">
33          We create native-like mobile experiences that work seamlessly across
34          both iOS and Android platforms.
35        </p>
36      </div>
37    ),
38    footer: (
39      <div className="flex w-full justify-between">
40        <Badge variant="outline">React Native</Badge>
41        <Badge variant="outline">Flutter</Badge>
42      </div>
43    ),
44  },
45  {
46    id: 3,
47    title: "Backend Services",
48    description: "Scalable API solutions",
49    content: (
50      <div className="p-2">
51        <p className="text-sm">
52          Our backend services are built to scale, with robust APIs and
53          efficient database designs.
54        </p>
55      </div>
56    ),
57    footer: (
58      <div className="flex w-full justify-between">
59        <Badge variant="outline">Node.js</Badge>
60        <Badge variant="outline">Python</Badge>
61      </div>
62    ),
63  },
64  {
65    id: 4,
66    title: "DevOps",
67    description: "CI/CD and deployment",
68    content: (
69      <div className="p-2">
70        <p className="text-sm">
71          We implement automated testing and deployment pipelines to ensure
72          consistent and reliable software delivery.
73        </p>
74      </div>
75    ),
76    footer: (
77      <div className="flex w-full justify-between">
78        <Badge variant="outline">Docker</Badge>
79        <Badge variant="outline">Kubernetes</Badge>
80      </div>
81    ),
82  },
83  {
84    id: 5,
85    title: "UI/UX Design",
86    description: "User-centered interfaces",
87    content: (
88      <div className="p-2">
89        <p className="text-sm">
90          Our design team creates intuitive and visually appealing interfaces
91          with a focus on user experience.
92        </p>
93      </div>
94    ),
95    footer: (
96      <div className="flex w-full justify-between">
97        <Badge variant="outline">Figma</Badge>
98        <Badge variant="outline">Adobe XD</Badge>
99      </div>
100    ),
101  },
102];
103

104export function InfiniteCardMarqueeHorizontalExample() {
105  return (
106    <InfiniteCardMarquee
107      cards={horizontalCards}
108      axis="horizontal"
109      speed="normal"
110      pauseOnHover
111      scaleOnHover
112      cardWidth={300}
113      gap={16}
114    />
115  );
116}
Vertical
Scroll cards upward inside a fixed-height viewport.
Web Development
Modern frontend solutions

Our team specializes in building responsive and accessible web applications using the latest technologies.

ReactNext.js
Mobile Apps
Cross-platform development

We create native-like mobile experiences that work seamlessly across both iOS and Android platforms.

React NativeFlutter
Backend Services
Scalable API solutions

Our backend services are built to scale, with robust APIs and efficient database designs.

Node.jsPython
DevOps
CI/CD and deployment

We implement automated testing and deployment pipelines to ensure consistent and reliable software delivery.

DockerKubernetes
Web Development
Modern frontend solutions

Our team specializes in building responsive and accessible web applications using the latest technologies.

ReactNext.js
Mobile Apps
Cross-platform development

We create native-like mobile experiences that work seamlessly across both iOS and Android platforms.

React NativeFlutter
Backend Services
Scalable API solutions

Our backend services are built to scale, with robust APIs and efficient database designs.

Node.jsPython
DevOps
CI/CD and deployment

We implement automated testing and deployment pipelines to ensure consistent and reliable software delivery.

DockerKubernetes
1"use client";
2

3import { Badge } from "@/components/ui/badge";
4import { CardItem, InfiniteCardMarquee } from "@/registry/ui";
5

6export const verticalCards: CardItem[] = [
7  {
8    id: 1,
9    title: "Web Development",
10    description: "Modern frontend solutions",
11    content: (
12      <div className="p-2">
13        <p className="text-sm">
14          Our team specializes in building responsive and accessible web
15          applications using the latest technologies.
16        </p>
17      </div>
18    ),
19    footer: (
20      <div className="flex w-full justify-between">
21        <Badge variant="outline">React</Badge>
22        <Badge variant="outline">Next.js</Badge>
23      </div>
24    ),
25  },
26  {
27    id: 2,
28    title: "Mobile Apps",
29    description: "Cross-platform development",
30    content: (
31      <div className="p-2">
32        <p className="text-sm">
33          We create native-like mobile experiences that work seamlessly across
34          both iOS and Android platforms.
35        </p>
36      </div>
37    ),
38    footer: (
39      <div className="flex w-full justify-between">
40        <Badge variant="outline">React Native</Badge>
41        <Badge variant="outline">Flutter</Badge>
42      </div>
43    ),
44  },
45  {
46    id: 3,
47    title: "Backend Services",
48    description: "Scalable API solutions",
49    content: (
50      <div className="p-2">
51        <p className="text-sm">
52          Our backend services are built to scale, with robust APIs and
53          efficient database designs.
54        </p>
55      </div>
56    ),
57    footer: (
58      <div className="flex w-full justify-between">
59        <Badge variant="outline">Node.js</Badge>
60        <Badge variant="outline">Python</Badge>
61      </div>
62    ),
63  },
64  {
65    id: 4,
66    title: "DevOps",
67    description: "CI/CD and deployment",
68    content: (
69      <div className="p-2">
70        <p className="text-sm">
71          We implement automated testing and deployment pipelines to ensure
72          consistent and reliable software delivery.
73        </p>
74      </div>
75    ),
76    footer: (
77      <div className="flex w-full justify-between">
78        <Badge variant="outline">Docker</Badge>
79        <Badge variant="outline">Kubernetes</Badge>
80      </div>
81    ),
82  },
83  {
84    id: 5,
85    title: "UI/UX Design",
86    description: "User-centered interfaces",
87    content: (
88      <div className="p-2">
89        <p className="text-sm">
90          Our design team creates intuitive and visually appealing interfaces
91          with a focus on user experience.
92        </p>
93      </div>
94    ),
95    footer: (
96      <div className="flex w-full justify-between">
97        <Badge variant="outline">Figma</Badge>
98        <Badge variant="outline">Adobe XD</Badge>
99      </div>
100    ),
101  },
102];
103

104export function InfiniteCardMarqueeVerticalExample() {
105  return (
106    <div className="mx-auto w-full max-w-xs">
107      <InfiniteCardMarquee
108        cards={verticalCards.slice(0, 4)}
109        axis="vertical"
110        speed="fast"
111        cardWidth={280}
112        cardHeight={260}
113        gap={12}
114      />
115    </div>
116  );
117}
Dual rows
Two stacked horizontal rows with independent scroll direction. Same pattern as the testimonial-row-01 block.
Exceptional Quality
Tibbs Tech transformed our business operations.

"The team at Tibbs Tech delivered beyond our expectations. Their attention to detail and commitment to quality is unmatched in the industry."

JD

John Doe

CTO, TechCorp

Software Development⭐⭐⭐⭐⭐
Innovative Solutions
Cutting-edge technology implementation

"Tibbs Tech provided innovative solutions that helped us stay ahead of our competition. Their strategic approach to problem-solving is refreshing."

JS

Jane Smith

CEO, InnovateTech

AI Integration⭐⭐⭐⭐⭐
Reliable Support
24/7 customer assistance

"The support team at Tibbs Tech is always available and quick to respond. They've saved us from critical situations multiple times."

RJ

Robert Johnson

IT Director, Enterprise Co.

Technical Support⭐⭐⭐⭐⭐
Exceptional Quality
Tibbs Tech transformed our business operations.

"The team at Tibbs Tech delivered beyond our expectations. Their attention to detail and commitment to quality is unmatched in the industry."

JD

John Doe

CTO, TechCorp

Software Development⭐⭐⭐⭐⭐
Innovative Solutions
Cutting-edge technology implementation

"Tibbs Tech provided innovative solutions that helped us stay ahead of our competition. Their strategic approach to problem-solving is refreshing."

JS

Jane Smith

CEO, InnovateTech

AI Integration⭐⭐⭐⭐⭐
Reliable Support
24/7 customer assistance

"The support team at Tibbs Tech is always available and quick to respond. They've saved us from critical situations multiple times."

RJ

Robert Johnson

IT Director, Enterprise Co.

Technical Support⭐⭐⭐⭐⭐
Innovative Solutions
Cutting-edge technology implementation

"Tibbs Tech provided innovative solutions that helped us stay ahead of our competition. Their strategic approach to problem-solving is refreshing."

JS

Jane Smith

CEO, InnovateTech

AI Integration⭐⭐⭐⭐⭐
Reliable Support
24/7 customer assistance

"The support team at Tibbs Tech is always available and quick to respond. They've saved us from critical situations multiple times."

RJ

Robert Johnson

IT Director, Enterprise Co.

Technical Support⭐⭐⭐⭐⭐
Exceptional Quality
Tibbs Tech transformed our business operations.

"The team at Tibbs Tech delivered beyond our expectations. Their attention to detail and commitment to quality is unmatched in the industry."

JD

John Doe

CTO, TechCorp

Software Development⭐⭐⭐⭐⭐
Innovative Solutions
Cutting-edge technology implementation

"Tibbs Tech provided innovative solutions that helped us stay ahead of our competition. Their strategic approach to problem-solving is refreshing."

JS

Jane Smith

CEO, InnovateTech

AI Integration⭐⭐⭐⭐⭐
Reliable Support
24/7 customer assistance

"The support team at Tibbs Tech is always available and quick to respond. They've saved us from critical situations multiple times."

RJ

Robert Johnson

IT Director, Enterprise Co.

Technical Support⭐⭐⭐⭐⭐
Exceptional Quality
Tibbs Tech transformed our business operations.

"The team at Tibbs Tech delivered beyond our expectations. Their attention to detail and commitment to quality is unmatched in the industry."

JD

John Doe

CTO, TechCorp

Software Development⭐⭐⭐⭐⭐
1"use client";
2

3import { Badge } from "@/components/ui/badge";
4import { CardItem, InfiniteCardMarquee } from "@/registry/ui";
5

6export const rowsCards: CardItem[] = [
7  {
8    id: 1,
9    title: "Exceptional Quality",
10    description: "Tibbs Tech transformed our business operations.",
11    content: (
12      <div className="space-y-2 p-2">
13        <p className="text-sm">
14          &quot;The team at Tibbs Tech delivered beyond our expectations. Their
15          attention to detail and commitment to quality is unmatched in the
16          industry.&quot;
17        </p>
18        <div className="flex items-center gap-2 pt-2">
19          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/20 font-semibold text-primary">
20            JD
21          </div>
22          <div>
23            <p className="text-sm font-medium">John Doe</p>
24            <p className="text-xs text-muted-foreground">CTO, TechCorp</p>
25          </div>
26        </div>
27      </div>
28    ),
29    footer: (
30      <div className="flex w-full justify-between">
31        <Badge variant="outline">Software Development</Badge>
32        <span className="text-xs text-muted-foreground">⭐⭐⭐⭐⭐</span>
33      </div>
34    ),
35  },
36  {
37    id: 2,
38    title: "Innovative Solutions",
39    description: "Cutting-edge technology implementation",
40    content: (
41      <div className="space-y-2 p-2">
42        <p className="text-sm">
43          &quot;Tibbs Tech provided innovative solutions that helped us stay
44          ahead of our competition. Their strategic approach to problem-solving
45          is refreshing.&quot;
46        </p>
47        <div className="flex items-center gap-2 pt-2">
48          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/20 font-semibold text-primary">
49            JS
50          </div>
51          <div>
52            <p className="text-sm font-medium">Jane Smith</p>
53            <p className="text-xs text-muted-foreground">CEO, InnovateTech</p>
54          </div>
55        </div>
56      </div>
57    ),
58    footer: (
59      <div className="flex w-full justify-between">
60        <Badge variant="outline">AI Integration</Badge>
61        <span className="text-xs text-muted-foreground">⭐⭐⭐⭐⭐</span>
62      </div>
63    ),
64  },
65  {
66    id: 3,
67    title: "Reliable Support",
68    description: "24/7 customer assistance",
69    content: (
70      <div className="space-y-2 p-2">
71        <p className="text-sm">
72          &quot;The support team at Tibbs Tech is always available and quick to
73          respond. They&apos;ve saved us from critical situations multiple
74          times.&quot;
75        </p>
76        <div className="flex items-center gap-2 pt-2">
77          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/20 font-semibold text-primary">
78            RJ
79          </div>
80          <div>
81            <p className="text-sm font-medium">Robert Johnson</p>
82            <p className="text-xs text-muted-foreground">
83              IT Director, Enterprise Co.
84            </p>
85          </div>
86        </div>
87      </div>
88    ),
89    footer: (
90      <div className="flex w-full justify-between">
91        <Badge variant="outline">Technical Support</Badge>
92        <span className="text-xs text-muted-foreground">⭐⭐⭐⭐⭐</span>
93      </div>
94    ),
95  },
96];
97

98export function InfiniteCardMarqueeRowsExample() {
99  return (
100    <InfiniteCardMarquee
101      cards={rowsCards}
102      rows={2}
103      rowReverse={[false, true]}
104      cardWidth={280}
105      cardHeight={340}
106      gap={16}
107      rowGap={8}
108    />
109  );
110}
Reverse
Scroll in the opposite direction with a slower preset.
Web Development
Modern frontend solutions

Our team specializes in building responsive and accessible web applications using the latest technologies.

ReactNext.js
Mobile Apps
Cross-platform development

We create native-like mobile experiences that work seamlessly across both iOS and Android platforms.

React NativeFlutter
Backend Services
Scalable API solutions

Our backend services are built to scale, with robust APIs and efficient database designs.

Node.jsPython
DevOps
CI/CD and deployment

We implement automated testing and deployment pipelines to ensure consistent and reliable software delivery.

DockerKubernetes
UI/UX Design
User-centered interfaces

Our design team creates intuitive and visually appealing interfaces with a focus on user experience.

FigmaAdobe XD
Web Development
Modern frontend solutions

Our team specializes in building responsive and accessible web applications using the latest technologies.

ReactNext.js
Mobile Apps
Cross-platform development

We create native-like mobile experiences that work seamlessly across both iOS and Android platforms.

React NativeFlutter
Backend Services
Scalable API solutions

Our backend services are built to scale, with robust APIs and efficient database designs.

Node.jsPython
DevOps
CI/CD and deployment

We implement automated testing and deployment pipelines to ensure consistent and reliable software delivery.

DockerKubernetes
UI/UX Design
User-centered interfaces

Our design team creates intuitive and visually appealing interfaces with a focus on user experience.

FigmaAdobe XD
1"use client";
2

3import { Badge } from "@/components/ui/badge";
4import { CardItem, InfiniteCardMarquee } from "@/registry/ui";
5

6export const reverseCards: CardItem[] = [
7  {
8    id: 1,
9    title: "Web Development",
10    description: "Modern frontend solutions",
11    content: (
12      <div className="p-2">
13        <p className="text-sm">
14          Our team specializes in building responsive and accessible web
15          applications using the latest technologies.
16        </p>
17      </div>
18    ),
19    footer: (
20      <div className="flex w-full justify-between">
21        <Badge variant="outline">React</Badge>
22        <Badge variant="outline">Next.js</Badge>
23      </div>
24    ),
25  },
26  {
27    id: 2,
28    title: "Mobile Apps",
29    description: "Cross-platform development",
30    content: (
31      <div className="p-2">
32        <p className="text-sm">
33          We create native-like mobile experiences that work seamlessly across
34          both iOS and Android platforms.
35        </p>
36      </div>
37    ),
38    footer: (
39      <div className="flex w-full justify-between">
40        <Badge variant="outline">React Native</Badge>
41        <Badge variant="outline">Flutter</Badge>
42      </div>
43    ),
44  },
45  {
46    id: 3,
47    title: "Backend Services",
48    description: "Scalable API solutions",
49    content: (
50      <div className="p-2">
51        <p className="text-sm">
52          Our backend services are built to scale, with robust APIs and
53          efficient database designs.
54        </p>
55      </div>
56    ),
57    footer: (
58      <div className="flex w-full justify-between">
59        <Badge variant="outline">Node.js</Badge>
60        <Badge variant="outline">Python</Badge>
61      </div>
62    ),
63  },
64  {
65    id: 4,
66    title: "DevOps",
67    description: "CI/CD and deployment",
68    content: (
69      <div className="p-2">
70        <p className="text-sm">
71          We implement automated testing and deployment pipelines to ensure
72          consistent and reliable software delivery.
73        </p>
74      </div>
75    ),
76    footer: (
77      <div className="flex w-full justify-between">
78        <Badge variant="outline">Docker</Badge>
79        <Badge variant="outline">Kubernetes</Badge>
80      </div>
81    ),
82  },
83  {
84    id: 5,
85    title: "UI/UX Design",
86    description: "User-centered interfaces",
87    content: (
88      <div className="p-2">
89        <p className="text-sm">
90          Our design team creates intuitive and visually appealing interfaces
91          with a focus on user experience.
92        </p>
93      </div>
94    ),
95    footer: (
96      <div className="flex w-full justify-between">
97        <Badge variant="outline">Figma</Badge>
98        <Badge variant="outline">Adobe XD</Badge>
99      </div>
100    ),
101  },
102];
103

104export function InfiniteCardMarqueeReverseExample() {
105  return (
106    <InfiniteCardMarquee
107      cards={reverseCards}
108      axis="horizontal"
109      reverse
110      speed="slow"
111      cardWidth={280}
112      gap={20}
113    />
114  );
115}
Fast & continuous
Faster animation with hover pause and card scale disabled.
Web Development
Modern frontend solutions

Our team specializes in building responsive and accessible web applications using the latest technologies.

ReactNext.js
Mobile Apps
Cross-platform development

We create native-like mobile experiences that work seamlessly across both iOS and Android platforms.

React NativeFlutter
Backend Services
Scalable API solutions

Our backend services are built to scale, with robust APIs and efficient database designs.

Node.jsPython
Web Development
Modern frontend solutions

Our team specializes in building responsive and accessible web applications using the latest technologies.

ReactNext.js
Mobile Apps
Cross-platform development

We create native-like mobile experiences that work seamlessly across both iOS and Android platforms.

React NativeFlutter
Backend Services
Scalable API solutions

Our backend services are built to scale, with robust APIs and efficient database designs.

Node.jsPython
1"use client";
2

3import { Badge } from "@/components/ui/badge";
4import { CardItem, InfiniteCardMarquee } from "@/registry/ui";
5

6export const fastCards: CardItem[] = [
7  {
8    id: 1,
9    title: "Web Development",
10    description: "Modern frontend solutions",
11    content: (
12      <div className="p-2">
13        <p className="text-sm">
14          Our team specializes in building responsive and accessible web
15          applications using the latest technologies.
16        </p>
17      </div>
18    ),
19    footer: (
20      <div className="flex w-full justify-between">
21        <Badge variant="outline">React</Badge>
22        <Badge variant="outline">Next.js</Badge>
23      </div>
24    ),
25  },
26  {
27    id: 2,
28    title: "Mobile Apps",
29    description: "Cross-platform development",
30    content: (
31      <div className="p-2">
32        <p className="text-sm">
33          We create native-like mobile experiences that work seamlessly across
34          both iOS and Android platforms.
35        </p>
36      </div>
37    ),
38    footer: (
39      <div className="flex w-full justify-between">
40        <Badge variant="outline">React Native</Badge>
41        <Badge variant="outline">Flutter</Badge>
42      </div>
43    ),
44  },
45  {
46    id: 3,
47    title: "Backend Services",
48    description: "Scalable API solutions",
49    content: (
50      <div className="p-2">
51        <p className="text-sm">
52          Our backend services are built to scale, with robust APIs and
53          efficient database designs.
54        </p>
55      </div>
56    ),
57    footer: (
58      <div className="flex w-full justify-between">
59        <Badge variant="outline">Node.js</Badge>
60        <Badge variant="outline">Python</Badge>
61      </div>
62    ),
63  },
64  {
65    id: 4,
66    title: "DevOps",
67    description: "CI/CD and deployment",
68    content: (
69      <div className="p-2">
70        <p className="text-sm">
71          We implement automated testing and deployment pipelines to ensure
72          consistent and reliable software delivery.
73        </p>
74      </div>
75    ),
76    footer: (
77      <div className="flex w-full justify-between">
78        <Badge variant="outline">Docker</Badge>
79        <Badge variant="outline">Kubernetes</Badge>
80      </div>
81    ),
82  },
83  {
84    id: 5,
85    title: "UI/UX Design",
86    description: "User-centered interfaces",
87    content: (
88      <div className="p-2">
89        <p className="text-sm">
90          Our design team creates intuitive and visually appealing interfaces
91          with a focus on user experience.
92        </p>
93      </div>
94    ),
95    footer: (
96      <div className="flex w-full justify-between">
97        <Badge variant="outline">Figma</Badge>
98        <Badge variant="outline">Adobe XD</Badge>
99      </div>
100    ),
101  },
102];
103

104export function InfiniteCardMarqueeFastExample() {
105  return (
106    <InfiniteCardMarquee
107      cards={fastCards.slice(0, 3)}
108      speed="fast"
109      pauseOnHover={false}
110      scaleOnHover={false}
111      cardWidth={260}
112      gap={12}
113    />
114  );
115}
Testimonials
Taller cards suited to quotes and reviewer metadata. See also the testimonial-row-01 block for a dual-row layout.
Exceptional Quality
Tibbs Tech transformed our business operations.

"The team at Tibbs Tech delivered beyond our expectations. Their attention to detail and commitment to quality is unmatched in the industry."

JD

John Doe

CTO, TechCorp

Software Development⭐⭐⭐⭐⭐
Innovative Solutions
Cutting-edge technology implementation

"Tibbs Tech provided innovative solutions that helped us stay ahead of our competition. Their strategic approach to problem-solving is refreshing."

JS

Jane Smith

CEO, InnovateTech

AI Integration⭐⭐⭐⭐⭐
Reliable Support
24/7 customer assistance

"The support team at Tibbs Tech is always available and quick to respond. They've saved us from critical situations multiple times."

RJ

Robert Johnson

IT Director, Enterprise Co.

Technical Support⭐⭐⭐⭐⭐
Exceptional Quality
Tibbs Tech transformed our business operations.

"The team at Tibbs Tech delivered beyond our expectations. Their attention to detail and commitment to quality is unmatched in the industry."

JD

John Doe

CTO, TechCorp

Software Development⭐⭐⭐⭐⭐
Innovative Solutions
Cutting-edge technology implementation

"Tibbs Tech provided innovative solutions that helped us stay ahead of our competition. Their strategic approach to problem-solving is refreshing."

JS

Jane Smith

CEO, InnovateTech

AI Integration⭐⭐⭐⭐⭐
Reliable Support
24/7 customer assistance

"The support team at Tibbs Tech is always available and quick to respond. They've saved us from critical situations multiple times."

RJ

Robert Johnson

IT Director, Enterprise Co.

Technical Support⭐⭐⭐⭐⭐
1"use client";
2

3import { Badge } from "@/components/ui/badge";
4import { CardItem, InfiniteCardMarquee } from "@/registry/ui";
5

6export const testimonialsCards: CardItem[] = [
7  {
8    id: 1,
9    title: "Exceptional Quality",
10    description: "Tibbs Tech transformed our business operations.",
11    content: (
12      <div className="space-y-2 p-2">
13        <p className="text-sm">
14          &quot;The team at Tibbs Tech delivered beyond our expectations. Their
15          attention to detail and commitment to quality is unmatched in the
16          industry.&quot;
17        </p>
18        <div className="flex items-center gap-2 pt-2">
19          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/20 font-semibold text-primary">
20            JD
21          </div>
22          <div>
23            <p className="text-sm font-medium">John Doe</p>
24            <p className="text-xs text-muted-foreground">CTO, TechCorp</p>
25          </div>
26        </div>
27      </div>
28    ),
29    footer: (
30      <div className="flex w-full justify-between">
31        <Badge variant="outline">Software Development</Badge>
32        <span className="text-xs text-muted-foreground">⭐⭐⭐⭐⭐</span>
33      </div>
34    ),
35  },
36  {
37    id: 2,
38    title: "Innovative Solutions",
39    description: "Cutting-edge technology implementation",
40    content: (
41      <div className="space-y-2 p-2">
42        <p className="text-sm">
43          &quot;Tibbs Tech provided innovative solutions that helped us stay
44          ahead of our competition. Their strategic approach to problem-solving
45          is refreshing.&quot;
46        </p>
47        <div className="flex items-center gap-2 pt-2">
48          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/20 font-semibold text-primary">
49            JS
50          </div>
51          <div>
52            <p className="text-sm font-medium">Jane Smith</p>
53            <p className="text-xs text-muted-foreground">CEO, InnovateTech</p>
54          </div>
55        </div>
56      </div>
57    ),
58    footer: (
59      <div className="flex w-full justify-between">
60        <Badge variant="outline">AI Integration</Badge>
61        <span className="text-xs text-muted-foreground">⭐⭐⭐⭐⭐</span>
62      </div>
63    ),
64  },
65  {
66    id: 3,
67    title: "Reliable Support",
68    description: "24/7 customer assistance",
69    content: (
70      <div className="space-y-2 p-2">
71        <p className="text-sm">
72          &quot;The support team at Tibbs Tech is always available and quick to
73          respond. They&apos;ve saved us from critical situations multiple
74          times.&quot;
75        </p>
76        <div className="flex items-center gap-2 pt-2">
77          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/20 font-semibold text-primary">
78            RJ
79          </div>
80          <div>
81            <p className="text-sm font-medium">Robert Johnson</p>
82            <p className="text-xs text-muted-foreground">
83              IT Director, Enterprise Co.
84            </p>
85          </div>
86        </div>
87      </div>
88    ),
89    footer: (
90      <div className="flex w-full justify-between">
91        <Badge variant="outline">Technical Support</Badge>
92        <span className="text-xs text-muted-foreground">⭐⭐⭐⭐⭐</span>
93      </div>
94    ),
95  },
96];
97

98export function InfiniteCardMarqueeTestimonialsExample() {
99  return (
100    <InfiniteCardMarquee
101      cards={testimonialsCards}
102      cardWidth={320}
103      cardHeight={320}
104      gap={20}
105    />
106  );
107}
Product showcase
Reverse slow scroll with fillViewport for a seamless product row.
Analytics Dashboard
$1999

Gain insights with interactive reports and custom metrics.

CRM Solution
$2499

Manage customer relationships with our comprehensive CRM tool.

Project Management
$1799

Track projects, assign tasks, and monitor progress efficiently.

Analytics Dashboard
$1999

Gain insights with interactive reports and custom metrics.

CRM Solution
$2499

Manage customer relationships with our comprehensive CRM tool.

Project Management
$1799

Track projects, assign tasks, and monitor progress efficiently.

1"use client";
2

3import { Button } from "@/components/ui/button";
4import { CardItem, InfiniteCardMarquee } from "@/registry/ui";
5

6export const productsCards: CardItem[] = [
7  {
8    id: 1,
9    title: "Analytics Dashboard",
10    description: "$1999",
11    content: (
12      <div className="flex flex-col items-center p-4">
13        <div className="mb-2 flex h-20 w-20 items-center justify-center rounded-md bg-primary/10">
14          <svg
15            className="h-12 w-12 text-primary"
16            fill="none"
17            stroke="currentColor"
18            viewBox="0 0 24 24"
19            xmlns="http://www.w3.org/2000/svg"
20          >
21            <path
22              strokeLinecap="round"
23              strokeLinejoin="round"
24              strokeWidth={2}
25              d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
26            />
27          </svg>
28        </div>
29        <p className="text-sm text-muted-foreground">
30          Gain insights with interactive reports and custom metrics.
31        </p>
32      </div>
33    ),
34    footer: <Button className="w-full">Purchase Now</Button>,
35    className: "border-primary/10",
36  },
37  {
38    id: 2,
39    title: "CRM Solution",
40    description: "$2499",
41    content: (
42      <div className="flex flex-col items-center p-4">
43        <div className="mb-2 flex h-20 w-20 items-center justify-center rounded-md bg-primary/10">
44          <svg
45            className="h-12 w-12 text-primary"
46            fill="none"
47            stroke="currentColor"
48            viewBox="0 0 24 24"
49            xmlns="http://www.w3.org/2000/svg"
50          >
51            <path
52              strokeLinecap="round"
53              strokeLinejoin="round"
54              strokeWidth={2}
55              d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
56            />
57          </svg>
58        </div>
59        <p className="text-sm text-muted-foreground">
60          Manage customer relationships with our comprehensive CRM tool.
61        </p>
62      </div>
63    ),
64    footer: <Button className="w-full">Purchase Now</Button>,
65    className: "border-primary/10",
66  },
67  {
68    id: 3,
69    title: "Project Management",
70    description: "$1799",
71    content: (
72      <div className="flex flex-col items-center p-4">
73        <div className="mb-2 flex h-20 w-20 items-center justify-center rounded-md bg-primary/10">
74          <svg
75            className="h-12 w-12 text-primary"
76            fill="none"
77            stroke="currentColor"
78            viewBox="0 0 24 24"
79            xmlns="http://www.w3.org/2000/svg"
80          >
81            <path
82              strokeLinecap="round"
83              strokeLinejoin="round"
84              strokeWidth={2}
85              d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"
86            />
87          </svg>
88        </div>
89        <p className="text-sm text-muted-foreground">
90          Track projects, assign tasks, and monitor progress efficiently.
91        </p>
92      </div>
93    ),
94    footer: <Button className="w-full">Purchase Now</Button>,
95    className: "border-primary/10",
96  },
97];
98

99export function InfiniteCardMarqueeProductsExample() {
100  return (
101    <InfiniteCardMarquee
102      cards={productsCards}
103      reverse
104      speed="slow"
105      cardWidth={300}
106      cardHeight={340}
107      gap={16}
108      fillViewport
109    />
110  );
111}

Installation & source

Install via the shadcn CLI or copy the registry files manually.

bash
npx shadcn@latest add @tt-ui/infinite-card-marquee

Props

NameTypeDefaultDescription
cardsCardItem[]RequiredItems to render in the loop
axis"horizontal" | "vertical""horizontal"Scroll along the x or y axis
reversebooleanfalseOpposite scroll (right/up instead of left/down)
speed"slow" | "normal" | "fast""normal"Animation speed preset
pauseOnHoverbooleantruePause while the pointer is over the viewport
scaleOnHoverbooleantrueSlight scale-up on card hover
cardWidthnumber | string300Card width (number = px)
cardHeightnumber | string"auto"Card height; auto uses a fixed default for layout stability
gapnumber16Gap between cards in px
setsnumber2How many full list copies per track when fillViewport is false
fillViewportbooleanfalseCompute copies from container size for a seamless loop
rowsnumber1Stack multiple horizontal marquee rows (horizontal axis only)
rowReverseboolean | boolean[]-Per-row scroll direction; array entries override `reverse` for that row
rowGapnumber12Vertical spacing between rows in px when rows > 1
classNamestring-Outer wrapper
viewportClassNamestring-Clipped area (vertical default height is h-[400px])
trackClassNamestring-Animated row/column
itemClassNamestring-Every Card root (merged with each item className)
rowClassNamestring-Each row viewport when rows > 1