Hi everyone, I am new to NextJS. I recently set up a basic NextJS starter project with NextUI by using the command
npx create-next-app -e https://github.com/nextui-org/next-app-templateNow, I am trying to add a tab group with 3 tabs to the default page.tsx. Following the documentation at , here is what I have so far:
...
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>
);
}
Unfortunately, when I try to start my server using npm run dev, I encounter a runtime error that says:
Unhandled Runtime Error
Error: Unknown element <[object Object]> in collection.
You can find the full stack trace here.
I have checked that all dependencies are installed using
npm i @nextui-org/<component name>Here are the versions I am using: NextJS version: 14.1.0 NextUI version: 2.x