# Pass Slice data to client in Nextjs 14

**URL:** <https://community.prismic.io/t/pass-slice-data-to-client-in-nextjs-14/15190>\
**Category:** Developing with Prismic\
**Tags:** nextjs, typescript, reactjs\
**Created:** [February 5, 2024, 11:04pm UTC](https://community.prismic.io/t/pass-slice-data-to-client-in-nextjs-14/15190 "2024-02-05T23:04:17Z")\
**Posts on this page:** 1\
**Showing post:** 12

<div class="post-metadata">

**Author:** ![nf\_mastroianni](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/nf_mastroianni/32/7071_2.png) [@nf\_mastroianni](https://community.prismic.io/u/nf_mastroianni)\
**Post date:** [February 6, 2024, 9:16pm UTC](https://community.prismic.io/t/pass-slice-data-to-client-in-nextjs-14/15190/12 "2024-02-06T21:16:57Z")

</div>

Can I assume that

```auto
const tabData // is an array of your custom type called "tab?"

```

Let's assume that's a "yes."

You then pass an array of tab types to the TabList component.

I would think your TabList component might be structured like this (note the change in types imported):

```auto
"use client";

import { Content } from "@prismicio/client";
import {PrismicRichText} from '@prismicio/client';
import {
  TabDocument
} from "../../../prismicio-types";
import { Tabs, Tab, Card, CardBody } from "@nextui-org/react";

type TabsListProps = {
  tabs: Array<TabDocument>;
};
const TabList = (tabData: TabListProps) => {
  return (
    <div className="flex w-full flex-col flex-center justify-center">
      <Tabs>
        {
          tabData.length && tabData.map((item, index) => {
            <Tab key={index} title={item.tab_name}>
              {/* Render the richtext as follows*/}
             {'heading' in item ? (<PrismicRichText field={item.heading} />) : null }
            </Tab>
          }
        }
      </Tabs>
    </div>
  )
}
export default TabList

```

---

_[View the full topic](https://community.prismic.io/t/pass-slice-data-to-client-in-nextjs-14/15190)._