Yami UI

An infinite auto-scrolling strip for logos, testimonials, and content.

ALAliceDesigner

BOBobEngineer

CACarolPM

DADaveDevOps

EVEvaQA

⭐5.0 — Fantastic UI library

🚀Ship faster with Yami

🎨Beautiful by default

🧩Composable primitives

🌙Dark mode first

Installation

Add the marquee component with the shadcn CLI.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/marquee.json

Usage

import { Marquee, MarqueeItem } from "@/components/ui/marquee"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"

const users = [
  { name: "Alice", role: "Designer", initials: "AL" },
  { name: "Bob",   role: "Engineer", initials: "BO" },
  // ...
]

<Marquee pauseOnHover duration={20}>
  {users.map((u) => (
    <MarqueeItem key={u.name}>
      <div className="flex items-center gap-2 rounded-full border border-border bg-card px-3 py-1.5 text-sm">
        <Avatar className="size-6">
          <AvatarFallback className="text-xs">{u.initials}</AvatarFallback>
        </Avatar>
        <span className="font-medium">{u.name}</span>
        <span className="text-muted-foreground">{u.role}</span>
      </div>
    </MarqueeItem>
  ))}
</Marquee>

Examples

Avatar chips

User profiles scrolling as pill chips

ALAliceDesigner

BOBobEngineer

CACarolPM

DADaveDevOps

EVEvaQA

FRFrankData

Code

import { Marquee, MarqueeItem } from "@/components/ui/marquee"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"

const users = [
  { name: "Alice", role: "Designer", initials: "AL" },
  { name: "Bob",   role: "Engineer", initials: "BO" },
  { name: "Carol", role: "PM",       initials: "CA" },
]

<Marquee pauseOnHover duration={20}>
  {users.map((u) => (
    <MarqueeItem key={u.name}>
      <div className="flex items-center gap-2 rounded-full border border-border bg-card px-3 py-1.5 text-sm">
        <Avatar className="size-6">
          <AvatarFallback className="text-xs">{u.initials}</AvatarFallback>
        </Avatar>
        <span className="font-medium">{u.name}</span>
        <span className="text-muted-foreground">{u.role}</span>
      </div>
    </MarqueeItem>
  ))}
</Marquee>

Testimonial cards

Review cards with rating and text

★★★★★

"Best component library I've used."

Ji-yeon K.

★★★★★

"Dark mode out of the box — love it."

Marco R.

★★★★★

"CJK typography support is a game changer."

Priya S.

★★★★☆

"Composable and well-documented."

Tom H.

Code

import { Marquee, MarqueeItem } from "@/components/ui/marquee"

const reviews = [
  { name: "Ji-yeon K.", stars: 5, text: "Best component library I've used." },
  { name: "Marco R.",   stars: 5, text: "Dark mode out of the box — love it." },
  // ...
]

<Marquee pauseOnHover duration={30} gap={1.5}>
  {reviews.map((r) => (
    <MarqueeItem key={r.name}>
      <div className="w-56 rounded-xl border border-border bg-card p-4">
        <div className="mb-2 text-yellow-400">{"★".repeat(r.stars)}</div>
        <p className="mb-3 text-sm">"{r.text}"</p>
        <p className="text-xs text-muted-foreground">{r.name}</p>
      </div>
    </MarqueeItem>
  ))}
</Marquee>