Testimonials Section

Layout

Display customer reviews and testimonials in a grid layout.

Import

import { 
  PixelTestimonials,
  PixelTestimonialCard,
  PixelTestimonialQuote,
  PixelTestimonialAuthor,
  PixelTestimonialAvatar,
  PixelTestimonialInfo,
  PixelTestimonialName,
  PixelTestimonialRole,
  PixelTestimonialRating,
  PixelTestimonialsHeader,
  PixelTestimonialsSectionTitle,
  PixelTestimonialsSectionDescription
} from "@/components/ui/pixel/pixel-testimonials"

Usage

"Amazing library! The pixel-art aesthetic is perfect."

SM

Sarah Miller

Designer

"Easy to use and highly customizable. Love it!"

MJ

Mike Johnson

Developer

"Excellent attention to detail. Production ready."

EK

Emma Kim

PM

Component Source

Copy and paste the following code into your project at /src/components/ui/pixel/pixel-testimonials.tsx

import { cva, type VariantProps } from "class-variance-authority";
import * as React from "react";
import { cn } from "@/lib/utils";

const pixelTestimonialsVariants = cva("relative w-full", {
  variants: {
    variant: {
      default: "bg-[#f5f5dc] dark:bg-[#1a1a1a]",
      primary: "bg-[#ff8c00] text-white",
      secondary: "bg-[#ffd700] text-black",
      dark: "bg-black text-white",
    },
    columns: {
      1: "grid-cols-1",
      2: "grid-cols-1 md:grid-cols-2",
      3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
    },
    gap: {
      none: "gap-0",
      sm: "gap-4",
      md: "gap-8",
      lg: "gap-12",
      xl: "gap-16",
    },
  },
  defaultVariants: {
    variant: "default",
    columns: 3,
    gap: "lg",
  },
});

export interface PixelTestimonialsProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof pixelTestimonialsVariants> {
  children?: React.ReactNode;
}

const PixelTestimonials = React.forwardRef<
  HTMLDivElement,
  PixelTestimonialsProps
>(({ className, variant, columns, gap, children, ...props }, ref) => {
  return (
    <section
      ref={ref}
      className={cn(
        pixelTestimonialsVariants({ variant }),
        "py-16 md:py-24",
        className,
      )}

// ... (more code below)

Props

PropTypeDefaultDescription
columns1 | 2 | 33Number of columns in the grid
gap"none" | "sm" | "md" | "lg" | "xl""md"Gap between testimonial cards
variant"default" | "primary" | "secondary" | "dark""default"Card visual style

Examples

Basic Testimonials

Simple testimonial cards with ratings

"Amazing library! The pixel-art aesthetic is perfect."

SM

Sarah Miller

Designer

"Easy to use and highly customizable. Love it!"

MJ

Mike Johnson

Developer

"Excellent attention to detail. Production ready."

EK

Emma Kim

PM

Accessibility

This component is built with accessibility in mind, including proper ARIA attributes, keyboard navigation, and focus management.