Studio perspectivesPro

• Type: Block

• Page: https://ui.xzero.co.uk/components/blocks/testimonial-stage

• Markdown: https://ui.xzero.co.uk/components/blocks/testimonial-stage/markdown

• Access: Xzero Pro

• Registry id: testimonial-stage

• Source file: registry/blocks/testimonial-stage/testimonial-stage.tsx

• Built from: Avatar, Button, Motion

• Keywords: react testimonial section, testimonial slider, customer quotes, testimonials with photos, review showcase, quote carousel

Use this to introduce the people behind a product or team. Use verified quotes and portrait permissions for a public site.

When to use

• Testimonials or editorial stories where the person's portrait matters.
• Landing sections that rotate through a few quotes on demand.

When not to use

• Use logo-marquee when logos are enough social proof.
• Use carousel for many short testimonials.
• Use team-showcase to introduce your own team.

Installation

Register both Xzero UI namespaces in your project's components.json:

{
  "registries": {
    "@xzero-ui": "https://mcp.xzero.co.uk/r/{name}.json",
    "@xzero-ui-pro": "https://mcp.xzero.co.uk/r/pro/{name}.json"
  }
}

npx shadcn@4.23.0 add @xzero-ui-pro/testimonial-stage

Install xzero-foundation once, and import @/components/xzero/foundation.css in your app root. No Xzero token is used by this snapshot. For sample portraits, photos, fonts, or logos, download https://mcp.xzero.co.uk/install-assets.mjs and run node xzero-install-assets.mjs <receiving-project>.

Usage

import { TestimonialStage } from "@/components/xzero/blocks/testimonial-stage/testimonial-stage";

export function Stories() {
  return (
    <TestimonialStage
      className="my-24"
      onPerspectiveChange={(p) => track("testimonial_view", p)}
    />
  );
}

API reference

TestimonialStage

Portrait-led stories with a tab list of people and a quote panel. Quotes and portraits are sample data.

Prop	Type	Default	Description
className	string	–	Appended to the root section.
onPerspectiveChange	(perspective: { id: string; name: string }) => void	–	Called when the active person changes.

Keyboard interactions

Keys	Action
ArrowLeft / ArrowRight	Move to the previous or next person in the tab list, wrapping around, and focus it.

Accessibility

• People form a role="tablist" with role="tab" and aria-selected.
• The quote panel is a polite live region.

Motion

• Portrait and quote crossfade with a small directional shift.
• Reduced motion removes the shift and uses instant transitions.

Responsive behavior

• Below 800px the columns narrow; below 680px the portrait stacks above the quote.
• Below 350px padding and quote size shrink to keep the quote readable.

Performance

• Only the active portrait is mounted, via next/image, and the first one gets priority loading.
• There is no autoplay timer; changes happen only on tab, arrow, or key input.

Notes for AI

• Use for testimonials or editorial stories about people.
• Replace the perspectives array with verified quotes and portraits you have permission to use.

Related

• Team showcase: An image led team introduction with profiles that open in place.
• Logo marquee: A quiet, continuously moving row of brand marks with a pause control.
• Carousel: Browse a row of slides by dragging, flicking, or arrowing through them.
• Tabs: Switch between related content in the same context.

Guidance for AI tools

Blocks are complete, self-contained screens with sample data. Replace the sample data and connect the callbacks described above. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://ui.xzero.co.uk/llms.txt