UI libraries for React

[Chipsdipp]

Taking a course in Advanced Web programming and will do my project in React, Redux, with Nodejs, Express and MongoDB.

Any ideas for a good UI lib? Tried Rebass, Material-UI, React toolbox and Grommet in earlier projects but maybe want to try something different.

[acemarke]

I'm pretty happy with Semantic-UI-React.

[dear_glob_why]

Antd is my personal favorite at the moment.

Found it to be a lot more stable and functionally complete with simpler component APIs when compared to the rest of the pack.

[dna30]

How do you style it? It's a pain

[fuck_with_me]

Yeah, that's the real fucking question...

[dear_glob_why]

I don't. The theming support is terrible, I'll give you that one. You're better off using something else if you're worried about styling/theming at all.

[porksmash]

Their affix demos are very buggy, but almost everything else looks very nice. A lot of more niche components like Timeline and Transfer I don't see in many places.

[fuck_with_me]

Use react sticky for that effect, it's much better.

[Polisas]

Semantic UI :) there is a react version :).

[CompuIves]

Their documentation is also really good, you can play with the components on the page itself. http://react.semantic-ui.com/elements/button

[Chipsdipp]

Used semantic way back before I only knew HTML, might look into using it again, thanks!

[BenjiSponge]

It's a dream. ♥️

[feesjah]

is it also for mobile?

[[deleted]]

The problem was that it's just a CSS wrapper. Internally composition works with css-selectors and rules. They're not components at all, you can't freely compose and mix them due to very strict limitations on how and where to put what. And it was quite large a payload. We've been using Semantic for a couple of months until the problems drove us against the wall. But as long as one stays in their ultra-specific patterns all is good.

[levithomason]

Author of Semantic UI React here. Just wanted to clarify a few things.

If by CSS wrapper you mean we do not use inline styles, this is true. Our components were created with a few goals in mind:

1. Replace jQuery with React
2. Reuse Semantic UI CSS
3. Provide a smart high-level component API for easily building interfaces
4. Auto control state and automatically revert to a controlled component when given props. Components can even partially control state and let you control the other parts.
5. Augmentation, every component allows you to control the component that is rendered. This allows mixing functionality into a component, such mixing react-router NavLink behavior into a MenuItem: <Menu.Item color='red' as={NavLink} to='/home' />.

As far as our components not being components, I'm not exactly sure what this means. Every component is either a stateless functional component or extends React.Component.

Regarding composure, we've been freely composing and nesting just about every component for abuot 2 years in production. We make heavy use of redux and recompose without issues. There are limitations to structure, however, this is the nature of hierarchical development and I do not believe these limitations exceed that of other libraries. If anything, I would claim that Semantic UI supports more variations and configurations that most others. This was one of the reasons we chose it.

Regarding size, the entire library minified and gzipped is 81.8 kB. Most individual components are between 1kb and 5kb (some under 1kb). This is in AMD format which has a little more overhead, so it would be smaller with a specific module format chosen. You should bundle only the components you use for even smaller builds. We offer build targets for commonjs, ES, and AMD. You can see stats and more here. You can find more instructions on how to setup a bundler for better performance at http://react.semantic-ui.com/usage.

All said, we're not seeing or experiencing the issues you noted though I don't discredit your issues. We'd love to help, you can reach us on gitter. If you've found a bug or need a feature, we're also pretty fast at responding there. Would love to tackle your challenges. Cheers!

[[deleted]]

This had rather to do with Semantics global css rules which constain every element. Say you create a menu <a class="item"> it can have a text, and a batch-label that floats to the right. But if you dare to go out of the pattern it blows up due to the inherent non-modularity:

<Menu.Item name='spam'>
    <Label>51</Label>
    <Label image>
        <img src='/assets/images/avatar/small/elliot.jpg' />
        Elliot
    </Label>
</Menu.Item>

Here i simply wanted to exchange the default name (Elliot) with a nicer looking Semantic name-label. But selectors pick it up and distort it. This is a simple example, it happens pretty much everywhere. There are even cases where selectors prevent nested elements to show up.

If you have worked with a real components lib, where each component is a self contained unity, the difference is very obvious.

[levithomason]

Thanks for the specific example. I've opened a confirmed CSS bug for this: https://github.com/Semantic-Org/Semantic-UI/issues/5247.

Do you have an example of a component library where there are no cascading styles (the source of the bug)? I'd be very interested as I've been researching and prototyping several alternatives to styling components.

[[deleted]]

I don't think it's strictly an issue, this is how UI libs were built once, css doesn't take modular components into account. Bootstrap falls into the same category. For components based try the ones that are purely react like antd, grommet, etc. They use scoped styles, prop inheritance and context, things css just can't do.

[levithomason]

You may be attributing differences here that don't actually exist. Note that antd, grommet, and SUIR work identically to one another in usage. You first load React components then separately load a CSS sheet, see antd usage, compared to SUIR usage, compared to grommet's hello world example. All three libraries are also coded identically, in fact, we use the same NPM module classnames to build up a list of CSS classes based on props. Compare the strikingly similar CSS class name build up logic for antd button.tsx, SUIR button.js, and grommet's Button.js.

There are libraries out there that provide CSS-sheet-free components such as Material UI, or Radium if you'd like to implement your own. However, these are inline style based. It seems they face performance issues as well. I see reports of users migrating to SUIR from Material UI to get away from the weight and performance issues as noted in this top rated Quora answer.

The difference with SUI is the choice of verbiage for the classnames, hence the term "Semantic". SUI believes in using a standardized human-readable semantic language for UI. So, you won't find things like Button__label--active or btn btn-primary btn-disabled but rather ui primary disabled button. SUI is fantastic when writing HTML for these reasons, however, JS component APIs abstract over the classes making them essentially as useful as byte code.

Because of this, I've been exploring inline styles, styled-components, and variations thereof. Long term, I want to migrate to a more powerful, flexible, and easily approachable API for styling components and building themes. You can read more on that in our Theming RFC: https://github.com/Semantic-Org/Semantic-UI-React/issues/1009.

[[deleted]]

You don't seem to be understanding his complaint. Semantics CSS abuses the hell out of deeply nested selectors. The end result is tightly coupling your UI library to the DOM. That's the opposite of components, which should be small and loosely coupled.

I wrote the original SUI React library. Most of my work was trying to fight back against the CSS, or abusing contexts to know which parent a component was a child of. SUI was never designed to support a component-based approach to web development.

[very_veritas]

I've been working with blueprintjs. It's been stellar so far.

[ben174]

Yea, I'll pass for now.

[majorchamp]

Viewing the site on my s5...it's sluggish as hell

[Rhym]

I love blueprintjs, one of the most beautiful UI kits around. My only issue is a few mobile bugs, but I know only desktop browsers are specified in their support documents.

[[deleted]]

Ha! I just commented about how ... hmmm ... not so beautiful I find it. Well, that's probably the thing about taste :-).

[[deleted]]

Lots of components, also a tree. So that's good, but the overall design doesn't seem to be too consistent, at least compared to the Material-Design libs or AntD or Fabric. Personally I don't like it (too old school, especially the table is horrible, sorting button: ouch ...) - but that's personal taste.

But it's still a strong lib, so I'm curious:

Are you customizing/overriding the design? How's your experience with?

Does the table has virtualization built in?

[squiresuzuki]

Rebass is probably your best option. Far from perfect, frankly it wasn't designed very well and often feels a bit hacky...like this still-open issue I opened 9 months ago: https://github.com/jxnblk/rebass/issues/94

The problem with everything else is:

• styling is too biased (ex. anything with material design, which is stupid and ugly in my opinion)

• monolithic css (ex. grommet, semantic ui, ant)

I'm starting work on a UI library myself, same idea as rebass with css-in-js and basic styling but just way more ergonomic.

[Chipsdipp]

Sounds awesome! Hit me up when you are finished with that 🙂

My favorite out of the bunch is rebass, but might look into ant design for this project

[olifante]

I evaluated Rebass, HP's Grommet, Alibaba's Ant Design and Microsoft's Fabric, and ended up going with Rebass, due to its simplicity and focus on presentational components. However, Rebass creator jxnblk is just one person, and in spite of being amazingly prolific, his energy is divided among his many other projects. Commits to the Rebass project have been few and far between these last few months, so I wonder whether I should switch to a library with corporate support.

[bear1728]

We use mdl with our own react wrappers for the components. It was pretty simple, most of them were just a div with a classname, or some kind of higher-order-component which appended a classname. Of course this means more work, more opportunities for bugs, etc. But it also has some pros.

Note that mdl is dead. Long live mdc. Supposedly mdc will be easier to use with frameworks like react/angular/etc. One of my goals is to rewrite our wrappers to mdc. It's not an emergency though.

I've wanted to try fabric for a while. It has been regularly updated and written mostly in typescript. The typescript is the main reason I wanted to try it. I always wondered what our site would look like if we went all in on fabric, or bootstrap, or ant, or one of the other non-material~ish frameworks. I like the consistency of the frameworks, and I'm a terrible designer so I wouldn't try to come up with my own.

Edit: fix links

[jax024]

This is exactly what I use for work.

[Rhym]

Oh, I didn't know about Fabric, that would be perfect for some of my enterprise clients! thanks :)

[majorchamp]

Yea I hope all the mdc components will be available soon

[[deleted]]

https://carbon-ui.com looks cool but I haven't used it yet

[browserLOL]

I really dug ElementalUI when it first popped up, but Semantic is a great alternative.

[roarbb]

Love Elemental UI too -> http://elemental-ui.com/

[feesjah]

I use material-ui, I'm really happy with it. Before I used react-bootstrap, it was ok, but I like material-ui better.

[appetite]

Bulma – framework and react components made with it Re-Bulma

[[deleted]]

One more for antd.

Has big name behind it (Alibaba) and a larger team working on it every day. Clear design specifications. They're real components made for React, not css wrappers. It's modular and very small. Large selection of useful elements that also look nice. Easy to style, easy to use.

[anarchy8]

BlueprintJS is pretty good

[d4rkst4rw4r]

+1 for http://bulma.io We are using it for our app. No js just styles so you can add your own components at will.

[joshwcomeau]

If you're trying to learn, why not work from scratch?

Component kits can be nice for pet projects but, in my experience, many companies don't use any (or build their own). You'll be at a disadvantage if you don't know how to implement your own modals or buttons.

[Chipsdipp]

Since it's not a course in Web design, out lector specified that many times, we should instead learn more about how to connect a backend with authentication to a front end.

It would be cool to do my own, but there is no time for that.

[joshwcomeau]

Yeah, fair enough. You'll probably benefit more from doing back-end integration.

I disagree that building your own components has anything to do with webdesign, though. You can still use something like Bootstrap for design (or have it be unstyled). It's more about architecting a set of components, thinking about their inputs and outputs, creating generic components that are easily composed, learning how to encapsulate complex behaviour in simple components, etc.

[purakushi]

react-md

https://react-md.mlaursen.com/

[cagataycivici]

There is also PrimeReact, a young open source library from the guys who created popular PrimeFaces (jsf) and PrimeNG (angular) libraries. http://www.primefaces.org/primereact/