Radix UI component with Next JS and Tailwind CSS

Build a simple component with me from scratch and use the documentation from Radix UI, Next JS and Tailwind CSS.

Github repo:

Get my Free Figma component library based on Shadcn/UI and Tailwind CSS

Visit my Store - Free and Premium Design Templates

👋 CONNECT

#nextjs #tailwindcss #uidesign #ui

[pylejjy]

Thanks for making this amazing tutorial despite your horrible situation (being a brit)!

[silvershocknicktail]

Very clear video, thanks, going to use it as a reference while building my first Next app.

The Radix documentation for any given component is fairly clear, but I run into issues with it outside of that. Server-side rendering for example. Like you, if I put a Radix component in anything server-side I get an error. The docs basically say "yep, it works". OK....how? Throw me a bone, eh?

Think for now to get the app working I'll proceed with "use client" but man it's gonna annoy the hell out of me that it *can* work.

[yabr]

I couldn't understand why Radix UI doesn't work in Next. There were no "use client" messages in the console. Spent 2 hours looking for the problem. Thank you.

[tejasness]

Thanks bro, I was quite confused. Shadcn feels difficult to edit styles. I would rather use radix only.. lmao. What do you think? Haha

[xfitx]

I have to add ! to make as "!important", because just the classes aren't working, do you know why? Radix CSS should be overrided this way?

[isarf]

You looked bit confused. Btw nice video