Building your own UI can be a troubling task. You need to take in all sorts of tasks and topics like accessibility, responsiveness, and of course, it needs to look pretty. 😉
Luckily, you can find a whole bunch of libraries which relieve you from this trouble! Let’s go over the 3 prettiest ones together!
Chakra is the accessible, themeable, and modern UI kit for React. With its large and friendly community of developers, there is nothing Chakra can’t tackle. Their easy-to-use API won’t take long to master and they have made it extra easy to add your own styling on top of the existing components. That way, every UI you create with Chakra can be its own custom creation!
If you want to have a look at what is possible with Chakra, then you should have a look at Chakra Pro. A package of pre-made components which you can buy if you want to. All these components and pages are built using Chakra UI so the sky truly is the limit as you can see!
Just be freaking kind, a webshop that builds using Chakra UI
When you start browsing around the Geist documentation and example page. You may get this weird feeling that you have already seen it somewhere. That would not be wrong because while Geist is not affiliated with the team at Vercel, their UI kit is clearly built to resemble the design used at Vercel.
You have got to give it to them, it looks incredibly sleek and modern. Its minimalistic styling and black-on-white colour scheme prevent clutter and make sure the right components get their well-deserved attention!
You can even find a remake of the classic Vercel dashboard using Geist!
Check it out here: https://react-dashboard-design.vercel.app/
A remake of the Vercel dashboard using Geist
While you may not know Supabase for its design resources, thanks to their open-source business model the entire UI kit is available for you to use. You can find it right there in their GitHub organisation.
While the UI kit is still a work in progress, I can’t wait to see where they take this. It already includes the basic utilities like cards and buttons with many more exciting features to come! The readme file contains a list of all the components that are on the roadmap.
The only example you need of what you can build with the Supabase UI kit is https://supabase.io!
The Supabase design style
Have a design-y day! 🧡
More content at plainenglish.io