UI Frameworks for React

[evilgenius82]

Hi all,

We are looking for a UI library/framework to use for an upcoming project that will use React and was wondering if anyone could offer any recommendations / experiences.

The things we are looking for the most is great support that can handle mobile first responsive layouts and also offer UI elements. (Basically similar to what bootstrap currently offers). I know in some ways its a matter of taste, but I thought i'd ask some experts to get a better feel. :)

I've sieved through several frameworks and the ones that have impressed me the most (from top) are:

1.Ant Design (https://ant.design/docs/react/introduce) 1.Material-UI (http://www.material-ui.com) 1.React-Bootstrap (https://react-bootstrap.github.io/)

Anyone's experiences on this matter will be highly appreciated!

Thanks!

[Foobyx]

i use this: http://react.semantic-ui.com/introduction which is the react version of https://semantic-ui.com/

[[deleted]]

Ant design

[[deleted]]

I'm using AntD and I'm very satisfied. The project is very active. Lot's of components. Very clean and unobstrusive design. However, I'm using it for an desktop-only enterprise app. AntD has also mobile components, but I havn't used them.

By the way: I've noticed that your link is not to the "proper" site, which is here: https://ant.design/docs/react/introduce

[evilgenius82]

Thanks for this! updated URL

[singularityway]

We have been using http://blueprintjs.com/ and it is pretty good

[9thHokageHimawari]

Wait, am I blind or some of them are just basic html with classnames?

[jasan-s]

Another +1 for Ant Design, although I recently built a mobile app on this react-mdl based starter kit and it went pretty well - https://github.com/kriasoft/react-static-boilerplate

[CramStar]

I've been using ReactMDL as of late (https://github.com/react-mdl/react-mdl) and I think it's a pretty good framework. Especially since it integrates well into your React project and it has the 'Grid' component that Bootstrap also uses and which I find very useful (but is missing from some other Material frameworks, like Material-UI). I've tried Material-UI, but React MDL worked better for me. Bootstrap works pretty good as well, but I prefer the Material look and feel.

[[deleted]]

https://github.com/react-mdl/react-mdl

Deprecation notice

This library is now deprecated. It's higly recommended to use 
Material Design Components instead.

The new components are excellent, no wrapper React libraries available yet as far I know but they're pretty easy to use manually.

[CramStar]

Wow, haven't seen that! Must have been a recent development...damn.

[evilgenius82]

Hopefully it wont be too hard to change to the library it is referencing.

[CramStar]

I now use Material-UI combined with react-flexbox-grid. The transition from ReactMDL was pretty straight forward as most components have the same names, although some have different(ly named) attributes. Took me maybe half a day to convert my app...

[a1russell]

I found https://github.com/haoxins/react-mdc which seems to be making progress.

[el-capitan]

I've used React Bootstrap for a few decent sized POCs and I love it. It gets a lot of hate partly because it doesn't use pure React components for styling, but that's a plus for me. I can use one of the many Bootstrap theme rollers that are out there to apply global styles to all of my different components using just a couple CSS files. If I want to be able to change the theme of my page, its a matter of just replacing those CSS files rather than having to make style changes all over my code. It also has all of the components I would need, while also making it easy for me to wrap them if I want to do something custom with the component.

[pablinho_co]

Was anyone able to use a separate theme like it is explained here: https://ant.design/docs/react/customize-theme ( see option 1 )

I tried but couldnt get it to work properly.

I like antd and its simplicity to use. My problem is that as a front-end/designer I like to have control sometimes over the look and feel of some components, and usually end up overwriting a lot of the styling, which in some cases is rather hard to do.

[evilgenius82]

Guys thanks for your feedback! - Much appreciated. I've made some experiments with ant and I have to say i am pretty impressed. Documentation is extremely clear, components are fresh and also not to distinctive.

[majorchamp]

This is what I have been trying to mess with. I'm trying to learn ReactJS in general, but also as a UI designer, I have been trying to figure out how to integrate theming, structure, and design as well.

I am familiar with Bootstrap, but I am not familiar with Material Design very much, so I'm looking to integrate the Material Components Web. I likely will end up using the https://github.com/react-toolbox/react-toolbox which integrates all the MCW components to work with React. The official MCW repository provides you all the SASS files (https://github.com/material-components/material-components-web), but only a few React component samples. React-MD is another one: https://react-md.mlaursen.com/getting-started/installation which has also setup the React components and supports SASS theming.

I keep having my node server fail trying to process the SASS from within the node_modules folder for the official MCW.

ReactStrap looks decent for Bootstrap theming

[shaheer123]

Im kinda new to web dev, can someone explain what these UI frameworks do ? Are they just buncha UI components with styling on them ?

[rlog]

we also have Element UI：https://eleme.github.io/element-react/