Next UI doesn't fully support Astro?

[dragonjay-lyj]

I see that there is a Button Usage in the official Usage, but when I try other components, e.g. Card and Navbar, I get the error: useNavbarContext: context is undefined. Seems you forgot to wrap component within

I would like to ask what to do in this situation?

[scharf-dev]

I have the exact same issue. Unfortunately it led me to uninstall Next UI again, since i couldn't use a majority of the components because of this.

[delaudio]

@dragonjay-lyj @scharf-dev you can solve it wrapping the Next UI component this way:

// NextCard.tsx
import { Button, Card, CardBody, CardHeader } from "@nextui-org/react";
import { useState } from "react";

export default function NextCard({ header }: { header: string }) {
  const [count, setCount] = useState(0);
  return (
    <Card className="py-4">
      <CardHeader className="pb-0 pt-2 px-4 flex-col items-start">
        <p className="text-tiny uppercase font-bold">{header}</p>
      </CardHeader>
      <CardBody className="overflow-visible py-2">
        <Button color="primary" onClick={() => setCount(count + 1)}>
          Button
        </Button>
        <p>Count: {count}</p>
      </CardBody>
    </Card>
  );
}

And then use it in a file like index.astro this way:

---
import NextCard from "../components/NextCard";
import Layout from "../layouts/Layout.astro";
---

<Layout title="Homepage">
  <main>
    <NextCard client:visible header="Header" />
  </main>
</Layout>

[devendrap]

The perfect understanding of how Astro works. Create standalone components under the components directory and include the single component in the .astro file. You are the best!

[nikhilk]

The workaround is certainly helpful. Can you share a bit more of that understanding as to what the issue is, and how this workaround makes the difference?

This bug has been open for a while, so wondering if this is fixable/planned to be fixed, or will we simply end up with an astro file that ends up with one big react App component that includes everything else?

[delaudio]

sorry for the late reply, at the moment it's the only way to bypass it.

@nikhilk there's a discussion in progress at withastro/roadmap#742

[Lidbetan]

Do i still need to wrap the component with nextUIProvider?

[delaudio]

Good point. I haven't worked with Astro lately but I think nothing changed on this side lately. I'll make some tests next days. Good time for refreshing Astro a bit.

[Lidbetan]

Update: No need for wrapping the component with Provider. Just create a regular .tsx component, use the NextUI component that you want and import the .tsx into the .astro comp

[ampsu]

Id rather ask. How do you wrap root with NextUIProvider in Astro? It is neccessary for locale options but nothing works.