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

# Upsell — React

Tabs are used to organise and switch between blocks of related content.

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

---

### Example

The `Upsell` section features an `Image` and short copy section with optional app buttons.

```tsx
function Example() {
  const content = {
  appStoreCtas: [
    {
      data: {
        trackDescription: 'apple-app-description',
        trackLabel: 'apple-app-label'
      },
      href: 'https://www.apple.com',
      alt: 'Apple App Store',
      src: 'https://static.skyassets.com/contentstack/assets/blt143e20b03d72047e/blt4810f3238a5fbce2/62d95a73ce66ad7665f7e83f/appleAppstore.svg'
    },
    {
      data: {
        trackDescription: 'google-app-description',
        trackLabel: 'google-app-label'
      },
      href: 'https://www.google.com',
      alt: 'Google Play Store',
      src: 'https://static.skyassets.com/contentstack/assets/blt143e20b03d72047e/blt787dd902a65a1de2/62d95a7317133b76c5bd2bb0/googlePlaystore.svg'
    }
  ],
  data: {
    testId: 'upsell-fixture-test-id',
    contentId: 'upsell-fixture-content-id'
  },
  header: {
    body: 'Watch sports on a huge range of devices – including smart TV, desktop, console, tablet and mobile on the Sky Go app.',
    headline: 'Watch on the big screen. Or the little one.',
    overline: {
      src: 'https://static.skyassets.com/contentstack/assets/blt143e20b03d72047e/blt074a50c83df46738/66ba2226492abc68b5bf9faf/Sky_Sports_logo_2020.svg',
      alt: 'Sky Sports'
    }
  },
  image: {
    alt: 'be awesome',
    src: 'https://placehold.co/600x400'
  },
  }

  return (
    <>
      <Upsell $appearance="default" {...content} />
    </>
  );
}
```

### 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.

- $animated?: `boolean`
- $appearance?: `string` (`default` | `light`)
- appStoreCtas?: `array`
  - data?: `object`
  - href: `string`
  - alt: `string`
  - src: `string`
- background?: `object`
  - color?: `Color` ([color](/foundations/colours/))
  - image?: `object`
    - src: `string`
  - theme?: `Gradient` ([gradient](/foundations/gradients/))
- data?: `object`
- header: `object`
  - body?: `string`
  - headline: `string`
  - headlineLevel?: `string` (`h1` | `h2` | `h3`);
  - overline?: `string` | `object`
    - alt?: `string`
    - src: `string`
- image: `object`
  - alt?: `string`
  - src: `string`