Blueprint is another React UI toolkit that is optimized for building complex, data-dense web interfaces for desktop applications. Part of its aim is to keep things flexible by being reusable and focuses on composition, allowing Blueprint components to be composed to create higher-level structures. It also has a distinguishable content and color perception, allowing contrast and colors, including those that are accessible to colorblind users.
Installation
Run in your react app:
npm install @blueprintjs/core
Blueprint must be installed with react and react-dom since its additional packages have peer dependencies to these packages.
Usage
To import React components in your app:
import { Button, Intent, Spinner } from "@blueprintjs/core";
// using JSX:
const mySpinner = <Spinner intent={Intent.PRIMARY} />;
// use React.createElement if you're not using JSX.
const myButton = React.createElement(Button, { intent: Intent.SUCCESS }, "button content");
You need to also include the main CSS file from each Blueprint package. Additionally, the resources/ directory contains supporting media such as fonts and images.
Example using node packaging in CSS file:
@import "~normalize.css";
@import "~@blueprintjs/core/lib/css/blueprint.css";
@import "~@blueprintjs/icons/lib/css/blueprint-icons.css";
Example of a card component:
import React from 'react';
import "@blueprintjs/core/lib/css/blueprint.css"
import { Button, Card, Classes } from "@blueprintjs/core";
const Blueprint = () => (
<Card style={{width: 300}} className={Classes.CARD}>
<h3>Blueprint card</h3>
<p>Text</p>
<Button intent="primary" text="Read more" className={Classes.BUTTON} />
</Card>
);
export default Blueprint;
This is just a glimpse of the Blueprint UI and what you can do with it. It is optimized for data-dense interfaces and while you cannot use its full potential for web apps, it is still a good component library for React apps overall.
References
Top comments (0)