# Mini With Dividers In Grid

> Compact testimonials arranged in a grid with thin dividers between them. Fit many short quotes into a tidy space without crowding the layout.

A shadcn/ui block from the [@shadcn-ui-blocks](https://www.shadcn-ui-blocks.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcn-ui-blocks/marketing-testimonials-mini-with-dividers-in-grid).

- Page, with a live preview: https://shadcn.exchange/r/shadcn-ui-blocks/marketing-testimonials-mini-with-dividers-in-grid
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcn-ui-blocks/marketing-testimonials-mini-with-dividers-in-grid-light-c542220657933e2e.png
- Registry item: https://www.shadcn-ui-blocks.com/r/marketing-testimonials-mini-with-dividers-in-grid.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://www.shadcn-ui-blocks.com/r/marketing-testimonials-mini-with-dividers-in-grid.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `radix-ui`

## Files

### `components/blocks/marketing/testimonials/mini-with-dividers-in-grid.tsx`

```tsx
import { Avatar, AvatarImage } from "@/components/ui/avatar";

export default function MiniWithDividersInGrid() {
  return (
    <div className="container mx-auto px-4 py-24 md:px-6 lg:py-32 2xl:max-w-[1400px]">
      {/* Grid */}
      <div className="divide-border grid grid-cols-1 gap-x-3 divide-y border-y sm:grid-cols-2 sm:divide-x sm:divide-y-0">
        <div className="py-6 sm:-ms-4 sm:px-4">
          {/* Review */}
          <blockquote>
            <span className="text-sm">
              I&apos;m absolutely floored by the level of care and attention to
              detail Eliana has put into this project and for one can guarantee
              that we will be a return customer.
            </span>

            <footer className="mt-3">
              <div className="flex items-center gap-x-2">
                <Avatar className="size-5 shrink-0">
                  <AvatarImage src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" />
                </Avatar>
                <div className="grow">
                  <div className="text-muted-foreground text-xs">
                    Josh Grazioso
                  </div>
                </div>
              </div>
            </footer>
          </blockquote>
          {/* End Review */}
        </div>

        <div className="py-6 sm:px-4">
          {/* Review */}
          <blockquote>
            <span className="text-sm">
              To say that hiring Eliana has been life-changing is an
              understatement. My business has tripled and I got my life back.
            </span>

            <footer className="mt-3">
              <div className="flex items-center gap-x-2">
                <Avatar className="size-5 shrink-0">
                  <AvatarImage src="https://images.unsplash.com/photo-1671726203390-cdc4354ee2eb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" />
                </Avatar>
                <div className="grow">
                  <div className="text-muted-foreground text-xs">
                    Nicole Grazioso
                  </div>
                </div>
              </div>
            </footer>
          </blockquote>
          {/* End Review */}
        </div>
      </div>
      {/* End Grid */}
    </div>
  );
}
```

### `components/ui/avatar.tsx`

```tsx
"use client"

import * as React from "react"
import { Avatar as AvatarPrimitive } from "radix-ui"

import { cn } from "@/lib/utils"

function Avatar({
  className,
  size = "default",
  ...props
}: React.ComponentProps<typeof AvatarPrimitive.Root> & {
  size?: "default" | "sm" | "lg"
}) {
  return (
    <AvatarPrimitive.Root
      data-slot="avatar"
      data-size={size}
      className={cn(
        "group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
        className
      )}
      {...props}
    />
  )
}

function AvatarImage({
  className,
  ...props
}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
  return (
    <AvatarPrimitive.Image
      data-slot="avatar-image"
      className={cn(
        "aspect-square size-full rounded-full object-cover",
        className
      )}
      {...props}
    />
  )
}

function AvatarFallback({
  className,
  ...props
}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
  return (
    <AvatarPrimitive.Fallback
      data-slot="avatar-fallback"
      className={cn(
        "flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
        className
      )}
      {...props}
    />
  )
}

function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
  return (
    <span
      data-slot="avatar-badge"
      className={cn(
        "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none",
        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
        className
      )}
      {...props}
    />
  )
}

function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="avatar-group"
      className={cn(
        "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
        className
      )}
      {...props}
    />
  )
}

function AvatarGroupCount({
  className,
  ...props
}: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="avatar-group-count"
      className={cn(
        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
        className
      )}
      {...props}
    />
  )
}

export {
  Avatar,
  AvatarImage,
  AvatarFallback,
  AvatarGroup,
  AvatarGroupCount,
  AvatarBadge,
}
```