Comparing popular React component libraries

1

Ant Design

Unlike Ant Design, Material-UI offers built-in methods to style components. makeStyles() is useful, especially when your code starts to get big; it helps you find the element to style more quickly and makes the code more readable. The downside is that readability may degrade as a component grows. But overall, Material-UI is a strong, highly customizable library.

#Development Tools #Design Tools #UI 107 social mentions

2

Material UI

Unlike Ant Design, Material-UI offers built-in methods to style components. makeStyles() is useful, especially when your code starts to get big; it helps you find the element to style more quickly and makes the code more readable. The downside is that readability may degrade as a component grows. But overall, Material-UI is a strong, highly customizable library.

#Design Tools #CSS Framework #Development Tools 75 social mentions

3

React Bootstrap

React Bootstrap is a dream come true for developers who prefer Bootstrap because it brings the power and simplicity of Bootstrap to React. It includes a plethora of prebuilt, pure React components with no third-party libraries. In general, React Bootstrap offers most of the same functionalities as Bootstrap.

#Web App #Design Tools #Software Engineering 3 social mentions

4

Blueprint

const Blueprint = () => ( <Card style={{width: 300}} className={Classes.CARD}> <h3>Blueprint card</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea</p> <Button intent="primary" text="Read more" className={Classes.BUTTON} /> </Card> );

#Developer Tools #Design Tools #UI 16 social mentions

5

Semantic UI

Unlike Blueprint, Semantic UI was designed for crafting React apps. It has some prebuilt themes you can use either by installing it or with Create React App. Semantic UI components are also highly responsive and it enjoys pretty good browser support to boot.

#CSS Framework #Design Tools #Development Tools 19 social mentions

6

Evergreen by Segment

const Evergreen = () => ( <Pane display="flex" alignItems="center" padding={16} justifyContent="center" flexDirection="column" border="default" width={300}> <Heading is="h1">Evergreen Card</Heading> <Text marginY={10}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea</Text> <Button appearance="primary">Read more</Button> </Pane>

#Developer Tools #UI #React 4 social mentions

7

Reactstrap

const Reactstrap = () => ( <Card style={{width: 300}}> <CardBody> <CardTitle>Reactstrap Card</CardTitle> <CardText>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea</CardText> <Button color="primary">Read more</Button> </CardBody> </Card> );

#Developer Tools #React #React Components 8 social mentions

8

Onsen UI

Onsen UI is a bit different from the previous libraries we’ve examined. Because it’s built with a mobile-first design in mind, Onsen UI is mostly used to build cross-platform mobile web apps.

#Development Tools #Developer Tools #JavaScript Framework 2 social mentions