Inline Testimonials

Installation

Usage

import {
  InlineTestimonials,
  type Testimonial,
} from '@/components/sora-ui/disclosure/inline-testimonials';

const testimonials: Testimonial[] = [
  {
    id: '1',
    text: 'Undoubtedly one of the best resources in the world.',
    author: {
      name: 'Benji Taylor',
      role: 'Head of Design @Base',
      avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=96&h=96&fit=crop&crop=faces',
    },
  },
];

export default function Page() {
  return <InlineTestimonials testimonials={testimonials} />;
}

Props

InlineTestimonialsLabelConfig

Accessibility

By default only mouse hover reveals the author label (interaction="hover"), matching a decorative quote stream. Set interaction="focus" or interaction="both" to also attach tabIndex and onFocus/onBlur to each item, making the label reachable by keyboard (Tab) and screen-reader focus.

When prefers-reduced-motion: reduce is set, useReducedMotion() disables the label's slide-in animation and the blur filter on dimmed items — only a plain opacity fade remains. No extra configuration needed.

The quote text is always in the DOM. The visible author label only mounts on hover/focus (via AnimatePresence), so each item also renders a sr-only "— Name, Role" string right after its quote — screen readers get the attribution unconditionally, without needing to trigger the hover/focus reveal.