---
title: "Testimonials — React"
canonical: https://sky-ui.cf.sky.com/sections/testimonials/react
apiPackages: [{"name":"@sky-uk/ui-core","representedVersion":"13.2.0"},{"name":"@sky-uk/ui-sections","representedVersion":"1.2.4"}]
---

# Testimonials — React

```js
import { Testimonials } from '@sky-uk/ui-sections';
```

The Testimonials section is used to display product awards, reviews, or recognitions in a prominent and consistent format.

```tsx
function Example() {
  const content = {
    data: {
      testId: 'testimonials-test-id',
      contentId: 'testimonials-content-id'
    },
    items: [
      {
        author: 'John Smith',
        image: {
          alt: 'A cited creative work logo',
          src: 'https://static.skyassets.com/contentstack/assets/blt77d122705d37a002/bltf033a075fa703a7b/logoPlaceholder.png'
        },
        quote: 'Fast, reliable, and friendly support every time.',
        rating: 4,
        source: 'Sky Mobile'
      },
      {
        author: 'Jane Doe',
        image: {
          alt: 'A cited creative work logo',
          src: 'https://static.skyassets.com/contentstack/assets/blt77d122705d37a002/bltf033a075fa703a7b/logoPlaceholder.png'
        },
        link: {
          href: 'https://sky.com',
          target: '_blank',
          title: 'Visit SOURCE NAME to read more.'
        },
        quote: "Sky's service was outstanding and exceeded my expectations.",
        rating: 5,
        source: 'Sky'
      },
      {
        quote: 'Fast, reliable, and friendly support every time.',
        author: 'Joe Smith',
        rating: 2,
        source: 'Sky Mobile'
      }
    ],
    header: {
      headline: 'Testimonials'
    }
  }

  return (
    <>
      <Testimonials data={content.data} header={content.header} items={content.items} />
    </>
  );
}
```

### Props

Props marked with `?` are optional. Sections or section elements that do not provide the required props will not render.
The `data` prop support key/value pairs that are rendered as kebab case data attributes on the component.

- $appearance?: `string` (`default` | `light`)
- background?: `object`
  - $theme?: `Gradient` ([gradient](/foundations/gradients/))
  - $color?: `Color` ([color](/foundations/colours/))
  - $image?: `Image` ([image](/components/image/))
- data?
  - testId?: `string`
  - contentId?: `string`
- header?
  - $appearance: `boolean`
  - body?: `string`
  - headline: `string`
  - headlineLevel?: `string` (`h1` | `h2` | `h3`);
  - overline?: `string` | `Image`;
  - textCta?: `object`
    - text: `string`
    - href?: `string`
    - data?: `object`
    - onClick?: `function`
    - target?: `string`
  - primaryCta?: `object`
    - text: `string`
    - href?: `string`
    - data?: `object`
    - onClick?: `function`
    - target?: `string`
  - secondaryCta?: `object`
    - text: `string`
    - href?: `string`
    - data?: `object`
    - onClick?: `function`
    - target?: `string`
- items: `array`
  - BlockquoteProps:
    - $appearance?: `string`
    - author?: `string`
    - image?: `object`
    - link?: `object`
    - quote: `string`
    - rating?: `number`
    - source?: `string`