NEXT UI crash course with NEXT.JS | Tailwind CSS | React UI Framework

Learn Next UI easily with NextJS. Next UI is a framework based on tailwind CSS.
Crash courses: • Crash Course
Timestamp:
0:00 Intro
2:30 Setup
8:20 Button component
13:20 Link component
16:50 Dark theme
18:10 Switch between themes
22:00 Customize existing themes
32:00 Add custom theme
33:30 Override component styles
35:40 Add custom variants
Contacts:
Email: [e-mail]
Portfolio: thatanjan.vercel.app/
Blog: cules-coding.vercel.app/
Linkedin: / thatanjan
Github: github.com/thatanjan/
Twitter: / thatanjan
Blogs you might want to read:
Eslint, prettier setup with TypeScript and react: www.culescoding.vercel.app/bl...
What is Client-Side Rendering?: www.culescoding.vercel.app/bl...
What is Server Side Rendering?: www.culescoding.vercel.app/bl...
Everything you need to know about tree data structure: www.culescoding.vercel.app/bl...
13 reasons why you should use Nextjs: www.culescoding.vercel.app/bl...
Videos you might want to watch:
Setup Eslint Prettier with Typescript and React -Nextjs, Create React App: • Setup Eslint Prettier ...
Setup and deploy fullstack application on Vercel and Render: • How to setup and deplo...
Auth0 basics with Next.JS: • Auth0 basics with Next...
Upload images from React and Node: • How to upload images f...
Chakra-UI crash course: • Chakra UI crash course...
Next auth crash course: • Next Auth Basics tutor...
Build a small search engine with MongoDB: • Build a blog using #JA...
Playlists you might like:
Next.Js tutorials: • Nextjs tutorials
Build a blog using JAMstack: • Build a blog using JAM...
Quick tricks: • Access COOKIES in Next...
Crash course: • Redux toolkit crash co...
How-to videos: • Setup Eslint Prettier ...
Clone Blue Origin Landing Page: • Blue Origin Landing pa...
Stay safe and good bye.

[@mastermusich]

Great explanation of the Next UI. This video is very informative and easy to follow. I have just subscribed to your channel to stay updated with more content like this. Please keep up the awesome work.

[@CulesCoding]

Awesome, thank you!

[@BitWizCoder]

Thanks for the video. also one other thing. pleas share a neofetch screen shot 🤣

[@CulesCoding]

haha.. will do in the future.

[@nanonkay5669]

Next ui should be Mantine please. It's top tier

[@algaldia]

This is like shadcn/ui?

[@CulesCoding]

Well not entirely. Both of them are styled with Tailwind but Next UI abstracts way the complexity. And Shadcn allows you to copy paste the component and gives you full control over the component.

[@algaldia]

@@CulesCoding Thank you!

[@pruthvirajjadhav8124]

When I saw she is using Arch I knew she knows what she is talking about

[@CulesCoding]

I am a boy

[@user-sg7pp7bv4l]

@@CulesCoding 😁😄

[@mastermusich]

​@@CulesCoding With great power comes great responsibility Don't misuse your power.

[@akshatdubey4421]

Even after setting up, my components are unstyled

[@CulesCoding]

Can't say anything for sure. but make sure: 1. You have updated the tailwind config 2. Added the provider to your app And always follow the documentation.

[@akshatdubey4421]

@@CulesCoding I've done these exact steps

[@CulesCoding]

@@akshatdubey4421 Hard for me to say without seeing the code

[@omarelhassani8452]

i have the same issue

[@omarelhassani8452]

i fixed the issue by : const {nextui} = require("@nextui-org/react"); /** @type {import('tailwindcss').Config} */ module.exports = { content: [ // ... "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}", ], theme: { extend: {}, }, darkMode: "class", plugins: [nextui()], };