Avatar Tab Quotes

Gather several customer quotes into one section. On the left is a column of avatars and names — click one or use the arrow keys to switch. The selection marker (a 3px accent bar plus a soft tint) springs along the column, and the selected avatar in the list scales up to 1.1×. On the right you get the selected person's large avatar, the quote, the author and an optional result figure; on switch, the old content blurs out and the new one resolves out of a blur, while a soft 8% opacity glow behind it transitions to the selected person's hue. On narrow screens the list becomes a horizontally scrolling avatar row. No photos are needed: avatars default to initials on a golden-angle gradient circle, and you can pass avatarSrc to use a real image.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<AvatarTabQuotes/>

    </div>
  );
}

Installation

npx webberui@latest add https://webberui.com/r/avatar-tab-quotes.en.json

Usage

import { AvatarTabQuotes } from "@/components/ui/avatar-tab-quotes";

<AvatarTabQuotes
  eyebrow="What customers say"
  title="Four teams, four launch speeds"
  testimonials={[
    {
      quote: "The new member pages shipped in a week, and store staff now swap seasonal menus themselves.",
      name: "Maya Lindqvist",
      role: "Head of Operations",
      company: "Islet Coffee",
      highlight: "shipped in a week",
      metric: { value: "7 days", label: "Design to launch" },
    },
    {
      quote: "Our tracking page loads in half the time, and support calls dropped noticeably.",
      name: "Daniel Okafor",
      role: "Product Manager",
      company: "Polaris Freight",
    },
  ]}
/>

Props

AvatarTabQuotesItem

CSS variables

How it works

• The right-hand content uses AnimatePresence with mode="wait": the old content blurs (8px), moves up 8px and fades out, then the new content rises 8px out of a blur; both halves use --wb-avatar-tab-quotes-duration.
• The backdrop glow is a radial gradient filled with currentColor. Switching only changes color, so the browser's native colour transition drives the hue change without per-frame repaints from JavaScript.
• On narrow screens the avatar row scrolls horizontally; switching (including autoplay) only scrolls the list itself, never the page, and brings the selected avatar into view.
• Autoplay pauses on hover, while keyboard focus is inside the section, or when the tab is hidden; the progress line stops while paused and restarts on resume.

Accessibility

• The root is a <section>, named by the title via aria-labelledby when there is one, otherwise by listLabel
• The avatar list is role="tablist" with aria-orientation matching the actual direction (vertical column or the narrow-screen row); each avatar is a role="tab" button with a roving tabindex
• ↑/↓ in the vertical column, ←/→ in the horizontal row, and Home/End jump to the first and last testimonial; focus follows the selection
• The right side is role="tabpanel", labelled by the current tab via aria-labelledby; when not auto-advancing, content changes are announced with aria-live="polite", and announcements are turned off during autoplay
• Quotes render as figure / blockquote / figcaption; avatars are decorative (aria-hidden) and tab names combine the name and company
• When autoplay is on, a visible pause/play button is always shown (WCAG 2.2.2)
• When the user has reduce motion enabled, autoplay starts off (the play button can still turn it on), and the spring slide, avatar scale, blur and offset become a 150ms crossfade; testimonials can still be switched from the avatars