NEXT UI crash course with NEXT.JS | Tailwind CSS | React UI Framework
Вставка
- Опубліковано 1 сер 2024
- 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: thatanjan@gmail.com
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.
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.
Awesome, thank you!
Thanks for the video. also one other thing. pleas share a neofetch screen shot 🤣
haha.. will do in the future.
Got a problem here when making the provider file it seems that the children is highlited red and give out an error of Binding element 'children' implicitly has an 'any' type.ts(7031)
I guess you haven't added the types for children. It should be `ReactNode`.
Next ui should be Mantine please. It's top tier
what operating system are you using?
ArcoLinux (hyprland version)
@@CulesCoding cool waybar tho, at first moment i thought its customised kde
@@Chikobara thanks
This is like shadcn/ui?
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.
@@CulesCoding Thank you!
When I saw she is using Arch I knew she knows what she is talking about
I am a boy
@@CulesCoding 😁😄
@@CulesCoding
With great power comes great responsibility
Don't misuse your power.
Even after setting up, my components are unstyled
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.
@@CulesCoding I've done these exact steps
@@akshatdubey4421 Hard for me to say without seeing the code
i have the same issue
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()],
};