How do I implement NextUI Tab component in NextJS

Question

NextJS newbie here. I have created a simple NextJS starter project that includes NextUI built in using npx create-next-app -e https://github.com/nextui-org/next-app-template.

To the default page.tsx, I now want to add a tab group with 3 tabs. Following https://nextui.org/docs/components/tabs, this is what I put together:

...
import {Tabs, Tab} from "@nextui-org/tabs";
import {Card, CardBody} from "@nextui-org/card";
import {Chip} from "@nextui-org/chip";
...

export default function Home() {
    const tabInput = (
      <Tabs aria-label="Options">
        <Tab key="location" title="Location">
          <Card>
            <CardBody>
              <Chip>Bay Area</Chip>
              <Chip>NYC</Chip>
            </CardBody>
          </Card>  
        </Tab>
        <Tab key="date" title="Date">
          <Card>
            <CardBody>
              <Chip>Less than 24 hours</Chip>
              <Chip>Past week</Chip>
              <Chip>Past month</Chip>
            </CardBody>
          </Card>  
        </Tab>
      </Tabs>
    );

    return (
        <section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
            <div className="inline-block max-w-lg text-center justify-center">
                {tabs}
            </div>
        </section>
    );
}

When I try starting my server with npm run dev, I get a runtime error that looks like this:

Unhandled Runtime Error
Error: Unknown element <[object Object]> in collection.

full stack trace

I've managed to surmise that the error pops up if I add even a single <Tab> as a child of the <Tabs> component. I've made sure to install all the dependencies using npm i @nextui-org/<component name>

What am I missing?

NextJS version: 14.1.0 NextUI version: 2.x

Answer 1

The error "Error: Unknown element <[object Object]> in collection" is generally caused when we try to render a client component in a server side rendered file. By default, All files in Next.Js are server side rendered which can break using components like Dropdown, Tabs, ListBox, etc. from NextUI.

To resolve the issue, add "use client" at the top of your file.