How to use heroui(privious is nextui)?

[Famer-Y]

Feature Request

How to use heroui(privious is nextui)?

Is your feature request related to a bug?

N/A

What are the alternatives?

N/A

Additional context

https://www.heroui.com/docs/guide/tailwind-v4

[aklinker1]

Here's a basic tailwind setup.

https://github.com/wxt-dev/examples/tree/main/examples/tailwindcss

Not sure what else is required, but you should use the vite plugin, not the postcss plugin.

[Famer-Y]

Here's a basic tailwind setup.

https://github.com/wxt-dev/examples/tree/main/examples/tailwindcss

Not sure what else is required, but you should use the vite plugin, not the postcss plugin.

Thanks a lot! I’ve been struggling with this problem all day and never even thought to check the top-level styles—apparently that was the culprit. I’m still pretty new to Heroui, so I took so many wrong turns along the way. Really appreciate your help figuring this out!

[aklinker1]

Also see https://wxt.dev/guide/resources/faq.html#my-component-library-doesn-t-work-in-content-scripts

If you plan on using it in content scripts. But it should be fine if it uses tailwind.

[dinbtechit]

Also see https://wxt.dev/guide/resources/faq.html#my-component-library-doesn-t-work-in-content-scripts

If you plan on using it in content scripts. But it should be fine if it uses tailwind.

HeroUI components work like a charm in the pop-up. However, the same component does not work in the content script. I followed the steps from the above link. The styles (tailwindcss) work fine; however, the JS is not working because HeroUIProvider does not have a container. Have anyone found any work around for this?

Here is my onMount logic

...
 onMount: (container, shadow, shadowHost) => {
                // Create a root on the UI container and render a component
                const cssContainer = shadow.querySelector('head')!;
                const portalTarget = shadow.querySelector('body')!;
                const root = ReactDOM.createRoot(container);
                root.render(
                    <React.StrictMode>
                        <PortalTargetContext.Provider value={portalTarget}>
                            <HeroUIProvider container={cssContainer}>.  <-----<<< error in the line because does not have container prop
                                <Dialog onRemove={() => {
                                    root.unmount()
                                }}/>
                            </HeroUIProvider>
                        </PortalTargetContext.Provider>
                    </React.StrictMode>
                )
                ;
                return root;
            },

Popup:

Kapture.2025-08-13.at.19.44.14.mp4

Content Script:

Kapture.2025-08-13.at.19.45.26.mp4