Why UI Kits?

• Fast Prototyping
  • For clients who need a starting point
  • Personal Projects
• "Out of the box" functionality
• Robust, responsive styles
• Lightweight >>>> Bloated

Why NOT UI Kits?

• Most are Open Source Software, and come with OSS pain points
• UX Designer might wonder why they're there
• Making decisions based on what the library has available instead of what is best for the project
• You’ll probably load too many styles, you’ll probably not use the majority of the framework at all

What will I be assessing?

• Documentation
• Bloat
• Ease of use
• 1 hour time box to incorporate the library
• Identified issues

How will I be assessing?

• create-react-app appName (with the exception of for the Ant demo)

• yarn eject

• Install library

• Follow instructions in documentation to get started with the library

3 years old

v1-beta available

Preact & React Native support coming

Material-UI

Documentation

B+

Material-UI

Bloat

30 Components, including different versions of common components like buttons

import RaisedButton from 'material-ui/RaisedButton';
// instead of
import {RaisedButton} from 'material-ui';

B

Material-UI

Ease of Use

A

• I didn't need to add anything to Webpack

• I imported the components I needed.

• They were able to be dropped in and functioned correctly immediately

Material-UI

Timebox

A+

• This was my first one obviously, and I got it done in less than 45 minutes, while documenting the process, and getting interrupted halfway thru for a call

Material-UI

Identified Issues

• The styles on the components are inline. Meaning if you want to override a style in your own CSS, you have to use !important

• There are definitely some implications for using this library with SSR, but the info you need is documented

• They are now working on releasing a new beta and only focused on bug fixes of the version used in this demo

• At one point I ended up in the beta documentation and it wasn't immediately apparent

• Out of the box dark theme doesn't appear to be color accessible

Material-UI

Overall

A-

2-3 yrs old

jQuery free

Semantic

Semantic-UI-React

Documentation

B

Bloat

Many Components, not always grouped logically

import { Button, List, Checkbox, Form } from 'semantic-ui-react';

B-

Semantic-UI-React

Not a ton of styling, even with the CDN'd styles. 

Ease of Use

B

• I didn't need to add anything to Webpack

• Wasn't immediately apparent you MUST bring in CDN

• Documentation presented some challenges

• For being such a robust library, expected a little more styling. Also, styles difficult to override.

Semantic-UI-React

Timebox

A+

• Using some of the functional code from MUI, I completed this To Do app in 30ish minutes, took a bit more for documentation

Semantic-UI-React

Identified Issues

• For being such a large library, I would expect some of the components to come with a bit more styling

• Using the "as" prop can cause some difficulties for styling

• No mentions in the documentation for SSR

Semantic-UI-React

Overall

B

Semantic-UI-React

Enterprise-class UI design language for web applications

Written in TypeScript with complete defined types.

Just over 2 years old

Ant Design of React

Documentation

The Getting Started Guide 

npm install a cli just for this library, demo and professional version available

Documentation also has instructions for incorporating the library to a create-react-app

A-

Bloat

30 Components, including different versions of common components like buttons

import { Form, Input, Button, Checkbox } from 'antd';

A-

Ant Design of React

Ease of Use

B

• Because I did not use create-react-app, did take a moment to get acquainted

• No List or List item elements

• The demo cli at least does not create a robust app like create-react-app

Ant Design of React

Timebox

A

• Because I created an app with a different structure compared to the others, it took a little longer to acquaint myself. Still made my time box. 

Ant Design of React

Identified Issues

• While this is advertised as an "enterprise level" UI kit, taking people away from what they "know" to do it their way

• Does have some different elements than other kits reviewed thus far

• Seems generally odd to offer a "demo" and "real deal"

Ant Design of React

Overall

B

Ant Design of React

CSS Modules (written in SASS), Webpack and ES6

Beta also in available

React-Toolbox

Documentation

The Getting Started Guide, but half of what you need to know is in the GitHub repo

Large disconnect, lack of explanation with Themr

npm installed

Awesome playground in the documentation to see components in real time

C

Bloat

28 Components

import { AppBar } from 'react-toolbox/lib/app_bar';

B-

React-Toolbox

Ease of Use

D-

• Needed Additional Webpack stuff? 

• Incorrect/spread out documentation

React-Toolbox

Timebox

F

• Could not get it compile, despite many different approaches

React-Toolbox

Identified Issues

• SSR issues
• Themr madness
• Spread out documentation
• Beta vs Stable 

React-Toolbox

Overall

F

React-Toolbox