Chakra UI Quickstart - With NextJS
11.6 هزار بار بازدید -
4 سال پیش
-
This video is a quick
This video is a quick overview of chakra-ui and next.js. We take a look at the basic components of chakra-ui, add it to Next.js, make a dark switch component, and use some basic chakra elements. If you want to build a personal blog and website with next.js and chakra-ui be sure to check out my new videos on just that here: Chakra UI + Next JS Quickstart - Buil...
Check out my personal website which is built with chakra-ui!! https://benjamincarlson.io/
Versions: We use next.js 10.0.0 and chakra-ui next. Both of which came out in the last week!
Follow along with a complete chakra-ui and next.js tutorial series where you will code a personal website and blog: Chakra UI + Next JS Quickstart - Buil...
Learn Next.js playlist - Introduction To NextJS
Chakra playlist - Playlist
Resources:
Next.js - https://nextjs.org/docs
chakra-ui - https://next.chakra-ui.com/
Code: https://github.com/bjcarlson42/youtube
(0:00) Introduction
(1:34) Installing Chakra-ui
(4:23) Dark Mode (color mode)
(9:07) Basic chakra-ui elements
(15:53) Overriding theme
(19:45) useColorModeValue
(21:43) Conclusion
My Coding Gear:
⌨️ Keyboard - Apple Magic Keyboard - https://amzn.to/3g8A8QI
💻 Laptop - Apple MacBook Pro (2018 / 15 inch) - https://amzn.to/3wddJHL
🖥️ Monitor - Samsung CF390 Series - https://amzn.to/3pDc9fO
My Camera Gear:
📹 Camera - Canon EOS M50 - https://amzn.to/3ixAZfq
🔭 Awesome Camera Lens - Sigma (16mm / f1.4) - https://amzn.to/3pH1K2B
🎤 Microphone - Blue Yeti - https://amzn.to/2TdXLyq
💡 Lights - Neewer LED Lights - https://amzn.to/3gbm6ht
My Favorite Software:
📽️ Final Cut Pro - https://www.apple.com/final-cut-pro/
❗ Student Discount For FCP - https://www.apple.com/us-hed/shop/pro...
🚀 VSCode - https://code.visualstudio.com/
View All My Gear - https://benjamincarlson.io/gear
Support Me:
👨🏼💼 Join this channel to get access to perks - @benjamincarlson
💸 Sponsor me on GitHub - https://github.com/sponsors/bjcarlson42
Who Am I?
I’m Benjamin Carlson, a developer, student, and YouTube creator living in CT, USA. I make videos on programming, computer science, and productivity. I also started a programming tutorial website called Coffeeclass (https://coffeeclass.io) that complements this YouTube channel. Finally, I have a newsletter (https://buttondown.email/benjamincarlson) where I send out updates on my recent videos, writing, and anything I’m currently working on or find interesting. You can expect emails every 2 to 3 weeks.
Connect With Me:
📧 Email - [email protected]
🚅 Website - https://benjamincarlson.io
🐦 Twitter - Twitter: bjmncrlsn
🚀 Github: https://github.com/bjcarlson42
💼 LinkedIn - LinkedIn: bjcarlson42
✍️ Medium - Medium: benjamincarlson
📓 Newsletter - https://buttondown.email/benjamincarlson
If you need to contact me, the best way is email. I try to respond to everyone but it may take some time!
Disclaimer: Some of the above links are affiliate links. This means I may receive a small commission at no expense to you. This allows me to continue to post videos like this one!
#chakra
Check out my personal website which is built with chakra-ui!! https://benjamincarlson.io/
Versions: We use next.js 10.0.0 and chakra-ui next. Both of which came out in the last week!
Follow along with a complete chakra-ui and next.js tutorial series where you will code a personal website and blog: Chakra UI + Next JS Quickstart - Buil...
Learn Next.js playlist - Introduction To NextJS
Chakra playlist - Playlist
Resources:
Next.js - https://nextjs.org/docs
chakra-ui - https://next.chakra-ui.com/
Code: https://github.com/bjcarlson42/youtube
(0:00) Introduction
(1:34) Installing Chakra-ui
(4:23) Dark Mode (color mode)
(9:07) Basic chakra-ui elements
(15:53) Overriding theme
(19:45) useColorModeValue
(21:43) Conclusion
My Coding Gear:
⌨️ Keyboard - Apple Magic Keyboard - https://amzn.to/3g8A8QI
💻 Laptop - Apple MacBook Pro (2018 / 15 inch) - https://amzn.to/3wddJHL
🖥️ Monitor - Samsung CF390 Series - https://amzn.to/3pDc9fO
My Camera Gear:
📹 Camera - Canon EOS M50 - https://amzn.to/3ixAZfq
🔭 Awesome Camera Lens - Sigma (16mm / f1.4) - https://amzn.to/3pH1K2B
🎤 Microphone - Blue Yeti - https://amzn.to/2TdXLyq
💡 Lights - Neewer LED Lights - https://amzn.to/3gbm6ht
My Favorite Software:
📽️ Final Cut Pro - https://www.apple.com/final-cut-pro/
❗ Student Discount For FCP - https://www.apple.com/us-hed/shop/pro...
🚀 VSCode - https://code.visualstudio.com/
View All My Gear - https://benjamincarlson.io/gear
Support Me:
👨🏼💼 Join this channel to get access to perks - @benjamincarlson
💸 Sponsor me on GitHub - https://github.com/sponsors/bjcarlson42
Who Am I?
I’m Benjamin Carlson, a developer, student, and YouTube creator living in CT, USA. I make videos on programming, computer science, and productivity. I also started a programming tutorial website called Coffeeclass (https://coffeeclass.io) that complements this YouTube channel. Finally, I have a newsletter (https://buttondown.email/benjamincarlson) where I send out updates on my recent videos, writing, and anything I’m currently working on or find interesting. You can expect emails every 2 to 3 weeks.
Connect With Me:
📧 Email - [email protected]
🚅 Website - https://benjamincarlson.io
🐦 Twitter - Twitter: bjmncrlsn
🚀 Github: https://github.com/bjcarlson42
💼 LinkedIn - LinkedIn: bjcarlson42
✍️ Medium - Medium: benjamincarlson
📓 Newsletter - https://buttondown.email/benjamincarlson
If you need to contact me, the best way is email. I try to respond to everyone but it may take some time!
Disclaimer: Some of the above links are affiliate links. This means I may receive a small commission at no expense to you. This allows me to continue to post videos like this one!
#chakra
4 سال پیش
در تاریخ 1399/08/12 منتشر شده
است.
11,643
بـار بازدید شده