Thank you Colby!! Excellent video. A precise explanation with a simple example, but covers the basis of Chakra ui. Congratulations. A very special greeting from Caracas-Venezuela.
Really enjoy Chakra for fast interations. I'm still not sure how to create variants of their different components though. For example, I've managed to create style variants for the Button component inside the theme... But when I do the same on other components, variants don't work the same way.
@@colbyfayock Hi! Thank you for your interest. Well, I made a sandbox (codesandbox.io/s/chakra-variants-tn2jd ) with an example of a Button (which does allow me to extend the theme and create new variants), and two Inputs. Because variants don't work for me on the Input components, one of them is styled in a hacky way, and the other is just to show how variants don't work
@@electrichimp hm im not totally sure. looking through the docs, it looks like for that to work, you need to create your own component that consumes the variant theme 🤔 github.com/chakra-ui/chakra-ui/blob/a5a64c73f7493d828e7931ce09c77d8e398a6c9b/website/pages/docs/theming/component-style.mdx
@@colbyfayock hey, figured it out! Not necessarily: if the component already has variants, extending with the theme with the extendTheme function is enough... It wasn't working for the Input because the Input's variants expected an object with a "{field: [style]}" structure. If you follow that, you're golden 👍🏻
looks like you'd need to create your own component that pretty much does what the Avatar component does check out this tweet: twitter.com/NikolovLazar/status/1426239799820787715
i haven't used it enough to have a highly opinionated take on it. I think i like this a little better than Tailwind though, thats probably the only one ive dug into a lot, being that it feels like you can make the components work more nicely into another system than tailwind, where i would think tailwind you probably should go "all in" with tailwind for it to make sense. like, i could see myself using chakra components included in the sass modules that i typically prefer as far as framer motion, i think they're 2 different tools, where framer motion is more focused on the animations, but maybe you had particular overlap in mind?
if you're in the Next.js App Router, I wonder if you're running into an issue where you need to opt the component into a client component? i haven't used this in a little bit, so unsure. i would recommend searching GitHub Issues as well
yeah it's hard to balance making sure the text is big enough for the tutorial, i'll try to be more conscious about adding line breaks for stuff like that, but some of the content in there was default Next.js HTML
![[Chakra-ui] Customise your theme and components](/img/1.gif)
Learn how to build a full stack Next.js app in my upcoming course: colbyfayock.com/course
I liked how did not go around using extra content on page and just used what was presented and explained how chakraUI is done. Excellent approach!!❤🔥
thank you!
The fast pace is great. You present at the speed of thought. Thankyou
np! :)
Wonderful tutorial on Chakra. Probably need more of these. Great work Colby
thank you!!
Get fresh tutorials and other free content straight to your inbox! colbyfayock.com/news
This is definitely the best Chakra ui crash course !!!
thanks Stephen! 🙌
Thank you Colby!! Excellent video. A precise explanation with a simple example, but covers the basis of Chakra ui. Congratulations. A very special greeting from Caracas-Venezuela.
thanks so much, glad you enjoyed! :)
lot's of information in a short amount of time, this is a great format thank you so much !
no problem, glad you enjoyed! :)
7 mins and tons of new info.
Thanks Colby :)
no problem! :D
You absolutely nailed it within 7 min! Big Like!!
thanks Kyle!!
Happened to just search for an overview of chakra, found this and it has all I need.
🙌
Short video short explanations great!
🙌
Yeah, that was amazing! Thank you Colby 🙏😎
thank you!! 🙌
Great explanation mate :D Subbed!
thank you! 🙌
At 1:25 the close tag of ThemeProvider magically moved to the next line. How did you do that?
video editing 👀 sorry for the confusion. that happens to me all the time, would love an easy way to push to closing tag to the next line
yea :D
i was wondering about it too
pretty clean. quality vid
Thank you!
Really enjoy Chakra for fast interations. I'm still not sure how to create variants of their different components though. For example, I've managed to create style variants for the Button component inside the theme... But when I do the same on other components, variants don't work the same way.
do you think you could provide a code example to show me what you mean?
@@colbyfayock Hi! Thank you for your interest. Well, I made a sandbox (codesandbox.io/s/chakra-variants-tn2jd ) with an example of a Button (which does allow me to extend the theme and create new variants), and two Inputs. Because variants don't work for me on the Input components, one of them is styled in a hacky way, and the other is just to show how variants don't work
@@electrichimp hm im not totally sure. looking through the docs, it looks like for that to work, you need to create your own component that consumes the variant theme 🤔 github.com/chakra-ui/chakra-ui/blob/a5a64c73f7493d828e7931ce09c77d8e398a6c9b/website/pages/docs/theming/component-style.mdx
@@colbyfayock hey, figured it out! Not necessarily: if the component already has variants, extending with the theme with the extendTheme function is enough... It wasn't working for the Input because the Input's variants expected an object with a "{field: [style]}" structure. If you follow that, you're golden 👍🏻
@@electrichimp ah cool thanks for the tip
I love this guy
😎💪 thanks!
You may want to update this tutorial. Chakra and Framer throw some wacky bugs when installing the latest versions.
Thanks for the heads up. Unfortunately RUclips doesn't let you update videos
Thank you so much.
you got it!
how use next/image optimization when i use chakra components like avatar etc.
looks like you'd need to create your own component that pretty much does what the Avatar component does
check out this tweet: twitter.com/NikolovLazar/status/1426239799820787715
Found chara-ui in github Next.js/examples/ folder. We can set-up from there easily.
cool thanks
What's ur take on chakra compare to other.. Like framer motion
i haven't used it enough to have a highly opinionated take on it. I think i like this a little better than Tailwind though, thats probably the only one ive dug into a lot, being that it feels like you can make the components work more nicely into another system than tailwind, where i would think tailwind you probably should go "all in" with tailwind for it to make sense. like, i could see myself using chakra components included in the sass modules that i typically prefer
as far as framer motion, i think they're 2 different tools, where framer motion is more focused on the animations, but maybe you had particular overlap in mind?
Nice and succinct intro. I likes. :)
thanks Lefani!
Problem I'm facing is when you use any rich Chakra UI components, try adding a slider, just doesn't want to play ball
if you're in the Next.js App Router, I wonder if you're running into an issue where you need to opt the component into a client component? i haven't used this in a little bit, so unsure. i would recommend searching GitHub Issues as well
Hi guys nice content. I got an error warning in the console that say...Expected server HTML to contain a matching in ......... please help!!.
hey hard to tel without seeing the code, typically that means something's not hydrating properly
Thanks Colby - you talk a little fast for me at times!
yeah ive been trying to slow down lately :) hopefully the newer videos are a bit easier to keep up with
@@colbyfayock I like the pace you set. It's always possible to pause the video.
please slow down we learning here from you boss ;)
yeah 😅 sorry, im working on it twitter.com/colbyfayock/status/1335693425908342785
This is the old version now ...
thanks, i added a note to the description
@@colbyfayock Thanks for sharing the lib, it's really awesome~
@@mister.z2260 np hope the videos still somewhat helpful with the new version!
Bro it's not sim it is theme
so much text going off the right side of the screen ='(
Still liked your vid tho
yeah it's hard to balance making sure the text is big enough for the tutorial, i'll try to be more conscious about adding line breaks for stuff like that, but some of the content in there was default Next.js HTML