Great ways to boost the design of your React pages
In the scope of scribes vs conjurors, I find myself a conjuror almost every time. I love grabbing different libraries and tools and seeing what people have made and put out into the open for me to use. It’s especially fun when I can use it to make things look pretty and be functional. I have a few go-to libraries and tools now!
Chakra-UI https://chakra-ui.com/docs/
Choc-UI Prebuilt components for chakra UI — https://choc-ui.tech/
These two together are a powerhouse. The cards alone have helped me create countless different displays for information it’s a crime they’re free.
Here’s an example of the choc UI card component refactored to fit a totally different use case! Looks great right? I’m gonna break down the tools that made this possible. I already shared the first two.
Next is react-icons. https://react-icons.github.io/react-icons/
There’s a total of five unique icons on this component and they all serve a very powerful purpose and I had to take great care to make sure they were descriptive and could be understood by all. Good icons can save space, and say a lot with a little. They do say a picture is worth a thousand words.
Next is Chakra — UIs useColorModeValue and extendTheme hooks. They allow us to define a color palette in one javascript file and adhere that to all of our custom react components, much like we would with CSS, but in a way that’s more tailored to an all javascript workflow. They allow us to define a color scheme and easily adhere our components to it as well as change it on the fly.
There are countless other libraries that do the same thing. If you want to go this route just pick one you like the design of. Here are some alternatives.
- Material UI
ReactStrap — https://reactstrap.github.io/
Ant Design — https://ant.design/
These are all collections of pre-built components with pre-styled attributes. The problem with using pre-styled attributes is the lack of flexibility. Intended flexibility is included but your app is full of special cases, and you need to code that in yourself. These libraries are extremely useful and powerful for quick prototyping but you may find yourself frustrated. I remember my team for a recent project really struggled to create a hook that would allow the text size to change live on the site due to Chakra’s complete abstraction of the subject. If I had to do it again, I might use something like Styled Components.
https://styled-components.com/
Styled components allow you to inject real CSS into a react component in a way that the previous libraries abstract from you.
Last but definitely not least, Tailwind CSS
Tailwind CSS is a library that supercharges inline CSS allowing for the creation of customized components that really showcase the brand or organization you are trying to represent! This is a step of abstraction below completely ready to go premade components, but still abstracted past having your own stylesheet with CSS or SASS.
