Command Palette

Search for a command to run...

1.8k

Command Palette

Search for a command to run...

Blog

Testimonials Marquee

Scrolling marquee to showcase user testimonials.

Features

  • Continuous scrolling marquee with fade edges.
  • Single and multiple row layouts.
  • Composable with the Testimonial component.

Installation

$ pnpm dlx shadcn@latest add @ncdai/testimonials-marquee

Usage

import {
  Marquee,
  MarqueeContent,
  MarqueeFade,
  MarqueeItem,
} from "@/components/kibo-ui/marquee"
 
import {
  Testimonial,
  TestimonialAuthor,
  TestimonialAuthorTagline,
  TestimonialAuthorInfo,
  TestimonialAuthorName,
  TestimonialAvatar,
  TestimonialAvatarImg,
  TestimonialAvatarRing,
  TestimonialQuote,
  TestimonialVerifiedBadge,
} from "@/components/testimonial"
<Marquee>
  <MarqueeFade />
  <MarqueeFade />
 
  <MarqueeContent>
    <MarqueeItem>
      <Testimonial>
        <TestimonialQuote />
 
        <TestimonialAuthor>
          <TestimonialAvatar>
            <TestimonialAvatarImg />
            <TestimonialAvatarRing />
          </TestimonialAvatar>
 
          <TestimonialAuthorName>
            <TestimonialVerifiedBadge />
          </TestimonialAuthorName>
 
          <TestimonialAuthorTagline />
        </TestimonialAuthor>
      </Testimonial>
    </MarqueeItem>
  </MarqueeContent>
</Marquee>

Composition

Use the following composition to build a Testimonials Marquee

Marquee
├── MarqueeFade
├── MarqueeFade
└── MarqueeContent
    └── MarqueeItem
        └── Testimonial
            ├── TestimonialQuote
            └── TestimonialAuthor
                ├── TestimonialAvatar
                │   ├── TestimonialAvatarImg
                │   └── TestimonialAvatarRing
                ├── TestimonialAuthorName
                │   └── TestimonialVerifiedBadge
                └── TestimonialAuthorTagline

API Reference

Examples

Single Row

Multiple Rows

Loading…