Using Flowbite, Nextjs and Tailwindcss

[raven forge]

Hello, How can I add a class using Flowbite-react for nextjs? Since when adding the styles they do not appear on the screen.

[subtle citrus]

At the moment, Flowbite (flowbite-react) doesnt support className in the components

[magic talon]

We're going to launch a poll soon to vote on this based on the community feedback

[magic talon]

You can check out this guide for Next JS: https://flowbite.com/docs/getting-started/next-js/

[raven forge]

Thank you

[raven forge]

and when can it be used?

[subtle citrus]

Idk

[raven forge]

When you implement it, please let me know because I need it

[lusty sable]

Flowbite they shouldn't made flowbite-react if they don't support customization of components. I hate them for that and I won't recommend any react developer to use the library. Fck

[magic talon]

You can customize the components via the "theme" functionality and we'll introduce adding className's once again for those who want to use it that way.

[lusty sable]

That's the point of using tailwind, not jumping around to write CSS

Better put both options

[magic talon]

Yeah, that's what will happen, and from what I know @noble harbor will push this today in a release already

[noble harbor]

We have some fixes to release, let's see if I can introduce at least the className back for some components. 🙂

BTW, the general goals is:

• Put back the className support to the components;
• Using the className will overwrite the component style completely;
• Using the className will trow an alert to the console (for developing env only);
• Component should NOT do any magic or change sub-components structure, it must strictly follow the user's declared structure;
• All its sub-components must be explicitly accessible.

its going to happen in steps... and I'll probably need some help.

[heady harness]

hey guys has this been implemented yet? Otherwise what method can I use for customizing the react components?

[noble harbor]

Flowbite currently support theming

You can use it to change the component styles across your application

Or wrapping the components with other divs and using this divs to apply some custom styles to the component itself with css

[raven forge]

When will ClassNames be available?

[noble harbor]

Not sure yet. It is actually a lot of job, simply removing the excludeClassName function doesn't seems to be enough, but probably this would be the first step.

[heady harness]

Hey fellas, Is the react library okay to use with next.js?

[magic talon]

Yes, please check out the integration guide https://flowbite.com/docs/getting-started/next-js/

[heady harness]

Supp Peeps. How about some e-commerce templates and blocks? Also, maybe standardizing the blocks to be used with react/tailwinds? so I don't have to hunt, and replace fill-rule clip-rule etc. etc. Or does this already exist on the platform and I just haven't found them? There may be an option for non-rounded edges as well. I have noticed everyone uses round edges on everything. Same with Tailwinds UI. It's the flavor of the day and kind of lame. I'm cool with designing stuff myself, but happy to throw money at better designs and options...

[noble harbor]

className access is available at >= 0.3.0
https://www.npmjs.com/package/flowbite-react

[magic talon]

Hey there! Thanks for the suggestions - we'll start designing and coding the e-commerce UI blocks when we finish with the Application UI blocks that we are working on right now, I estimate that will be ready before the end of November.

All of the blocks and pages will eventually be available in React, Vue, and Svelte - but that will require some time.

The design itself can be changed especially as we offer the Figma file - Flowbite should be seen as a starting point that can be forked as well, not necessarily the ultime UI for all websites.

[raven forge]

Hi, I'm seeing a bug and it's that when using the Navbar everything looks small and when you click on the avatar everything returns to normal, I don't know if it happens in all lerl it happens to me in Nextjs

[noble harbor]

Open a GitHub issue and provide as much detail as possible