Which UI kit do you use for your React App?
Hi guys,
I want to build a react application and I'm really bad at designing.
First I tried Material UI, but I don't like it from the looks & usage in code.
I would like a UI Kit, which has a lot of templates and there is a solid page builder around.
Also something which I don't understand.
When I check out UI kits, I always need to install them via npm/yarn and then import each component at the top and then use it inside the render method.
How can I use a template, which isn't really coded in React, and only uses css classes?
"React" way:
import Component from 'blabla';
render(){
<Component/>
}
"Template" way:
<div class="bla bla bla">
</div>
Disclaimer: I need to have the landing page in react, since it's a functional landing page (appointments are mde on the landing page).
I generally use Bulma because I like the default styling better than most UI kits. By the way, you might find my React codebase generator helpful. It gives you a fully-functioning codebase, landing page UI, auth flow, etc. I'm running a deal for the IH community right now: http://divjoy.com/?promo=indiehackers
I thought about purchasing your product :) One question though: How do you use bulma in react apps? Do you import it in the index.js file with the link to the cdn, or do you download the npm package?
We include a global.scss file that imports the main Bulma sass file from its npm package, making it easy to override variables right in global.scss. Happy to send you a full example codebase so you can make sure Divjoy is right for you before purchasing. Wanna shoot an email to hello@divjoy.com?
TailwindCSS (https://tailwindcss.com/) might be what you are looking for.
It's pretty well-known and it provides a bunch of utility classes that you use to build your components and pages.
I really love ant design for my UI needs but it imports the components just like how you don't want. A simple way to get the effect that you are asking for is to use bootstrap css globally and then just use className="" in all of your react components. (React uses the className prop not class.)
I also often will use styled-components which allow you to define nested classes that you can select in your css using normal .yourclass{} selectors. Maybe that will get you what you need?
Are there any tradeoffs between those two variants?
It is greatly preferred to use the component method for styling because you can localize styles to the particular component that needs them and then only expose the global styles that you need. Styled-components is a really beautiful and react-like solution for doing this so I'd highly recommend checking that out. I wrote a post a while ago about how to convert less to styled components and it discusses a lot of the advantages of using component-based styling for react: https://www.codemochi.com/blog/less-to-styled-components/
https://blueprintjs.com/ allows you to use CSS only but importing is better.
Can you explain me why the one thing is better than the other?
I don't really get what to choose and if it makes a big difference.
Hey all, I'm arriving at this post late, but since your comments were helpful, I wanted to add one more question. I also use Material-UI React. I like the usage and components but would like to improve the styling to look more like the styles here: https://designingui.com/.
Are any of you aware of a place where I can buy pre-made themes for material-UI (the javascript objects that correspond to a bunch of css)?
Hi. I might be late to reply but check this out:
https://github.com/0wczar/airframe-react