How to Implement NextUI Library

[Strideface]

I want to use the NextUI library in order to import some ready-made, nicely styled components for my app and so I don't need to mess around with CSS too much. Here is the doc for that library: https://nextui.org/docs/guide/introduction

Up until now, I had been using Tailwind CSS, which is described as a Framework for CSS: https://tailwindcss.com/

NextUI is 'built on top of' Tailwind so that's why I want to use it, so as to keep on using Tailwind to style where I want but also use the UI components from NextUI for the bulk of it. I understood initially that it would be possible to interchange, or use simultaneously throughout my app, both these libraries/frameworks but since installing NextUI, my app doesn't have any styling applied to it. Just white with black text.

I've forked from the main branch to show the code since using NextUI. Before that, the main branch did not use NextUI and was working fine, albeit I had only applied very basic styling. Mainly positioning things rather than colouring and animating.

I need some help understanding what I'm doing wrong here, as the docs do seem to suggest that I can use NextUI with Tailwind but neither of them are being applied.

Things I've checked so far:

• The doc gives guidelines on how to install it using various 'Frameworks' and what I'm using ('create-react-app') isn't listed, so not sure if it means I can't use NextUI with it? Can't see anything online that specifically states this so I assume these guidelines is not an exhaustive list and it should be fine.

• I believe I'm wrapping the NextUIProvider around the root of my app, as advised in the docs: https://nextui.org/docs/guide/installation#provider-setup-1

In my app, I'm using it in index.js src/index.js because I think that would be the root directory of my app, but in the docs it talks about 'main.js'.

• I'm completely lost on the tailwind setup part so this may be where the problem is: https://nextui.org/docs/guide/installation#tailwind-css-setup-1

There is a tailwind confg file called tailwind.config.js but it doesn't look much like what's in the doc. This is because I'm confused on how to still use the extended themes I already was using, with what I'm supposed to configure theme-wise for NextUI.

To compare, here's that same file from the master branch where tailwind works as expected: https://github.com/Strideface/spotify-quiz-app/blob/master/tailwind.config.js

• I haven't installed the whole library and plan on just installing the individual components I want to import. The package.json file shows the list of dependencies: https://github.com/Strideface/spotify-quiz-app/blob/NextUI/package.json

At the moment, I've only used a component called popover to display an error message, here: https://github.com/Strideface/spotify-quiz-app/blob/d9156ac0f1f16ee570ebdec0bc0ac9eeaaeb976b/src/components/stages/play-quiz-stage/components/player/PlayPauseButton.jsx#L121 and here: https://github.com/Strideface/spotify-quiz-app/blob/d9156ac0f1f16ee570ebdec0bc0ac9eeaaeb976b/src/components/stages/play-quiz-stage/components/player/RepeatButton.jsx#L63

Alert is the name of a component I made which imports the popovercomponent. It works but there's no styling on it, just like the rest of the app.

Any ideas on what I'm doing wrong?

[Strideface]

@istride

[istride]

I think I've found the problem.

https://github.com/Strideface/spotify-quiz-app/blob/d9156ac0f1f16ee570ebdec0bc0ac9eeaaeb976b/tailwind.config.js#L1

Should be:

const {nextui} = require("@nextui-org/theme");

The rest looks ok to me, so fix the above and see whether that helps.

[Strideface]

You were right, that needed changing but also I needed to import { NextUIProvider } from "@nextui-org/system", where as before it was imported from "@nextui-org/react"

I was mixing two parts of the doc together, installing the whole library versus installing individual components, which is what I wanted.

So, I now have the popover component styled in the default theme like in the screenshot. I'll now need to figure out how to apply my own theme and the individual styles I had working before using tailwind. Going to leave this open as might need help there.

*I see the spelling mistake in 'preferred'