DEV Community

Leo Kalshteyn
Leo Kalshteyn

Posted on • Updated on

Blueprint UI Intro

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");
Enter fullscreen mode Exit fullscreen mode

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";
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)