I like to sometimes let the web page tell me where it wants to go in terms of responsiveness...
Haha well, in 2022, that approach might lead you to some hectic places on the front end. I truly didn't find any joy in making a component responsive ad nauseam and was struggling to find a design library that didn't feel bulky or claustrophobic.
Lucky for me, that helper turned out to be Chakra-UI.
Chakra-UI is just enough to bring the baseline UI up to a higher standard, but the extensive customizability leaves you feeling still very much in control. After redesigning two UIs from this library, I am sold and will preferentially use it for my front end projects going forward. Some features that really stood out:
The built-in breakpoints saved me on total-app responsiveness and are adaptable enough to meet today's diverse screen requirements.
You can combine features like the breakpoints with their custom hooks such as the useMediaQuery hook, which I used to easily switch views I had designed for mobile or desktop.
The dark/light mode works really nicely and it was super easy to implement, as you can see on my personal website here.
The text styles are intuitive, fun, and attractive. I created my "newspaper headlines" design here just from variations on their Heading feature. I also replaced the Wix pro gallery with their Grid component and found it more responsive overall.
All-in-all I would highly recommend integrating Chakra-UI into your next project for a satisfying User Experience and modern look!
Top comments (0)