Shawn Lin

Useful libraries for building a react dashboard

2018-11-18

UI Framework

Updated 2018-12-09

After making some real dashboards, Antd stood out to me as it offers many more components than Semantic UI and is a more complete ecosystem. However, it is not modulized and will be harder to integrate to your existing system since it’s css file overwrites almost all the basic things (h1, body, …) you can think of. Atlas Kit looks promising too, as it is highly modulized and components are beatiful. Material UI is better suited for mobile applications.

Original

Semantic UI React offers a beautiful UI framework. You can build a decent website up and running in no time with it. It has a lot of elements built in, and it’s also very well documented.

Semantic UI Demo

npm install --save semantic-ui-react semantic-ui-css

Alternatives

Material UI (Google)
React Bootstrap
Ant Design (Alibaba)
Fabric (Microsoft)
Altas Kit (Atlassian)
React Toolbox
Blueprint

Tables

After doing some research, I found React Bootstrap Table 2. It’s feature rich and very well documented. Note that at the current moment you’ll need to import Bootstrap’s CSS in your html file.

React Bootstrap Table 2 Demo

npm install --save react-bootstrap-table-next

Date Picker

React Datepicker is beautiful and easy to use.

React Datepicker Demo

npm install --save react-datepicker

Alternatives

React Dates (Airbnb)

Date Converstion

Moment.js is pretty much the go-to library for any date time conversion in javascirpt.

npm install --save moment

Select menu

React Select

npm install --save react-select