BlueprintJS is a React-based UI toolkit for the web. It is written in Typescript. This library is very optimized and popular for building interfaces that are complex data-dense for desktop applications that run in a modern web browser.

It is optimized for building complex data-dense interfaces for desktop applications. Blueprint is available as an NPM package @blueprintjs scope. This is not a mobile-first UI toolkit.

BlueprintJS Tutorial

Installation Steps of Blueprint.js

Install the package and its dependencies with an NPM client through npm or yarn:

npm i @blueprintjs/core
// or
yarn add @blueprintjs/core react react-dom

After installation, you’ll be able to import the React components in your application like –

import { Button } from "@blueprintjs/core";

Don’t forget to include the main CSS file from each Blueprint package, Additionally, the directory contains supporting media.

Using node-style package resolution in a CSS file:

@import "~normalize.css";
@import "~@blueprintjs/core/lib/css/blueprint.css";
@import "~@blueprintjs/icons/lib/css/blueprint-icons.css";

Add the below link inside head section of the page.

<link href=”path/to/node_modules/normalize.css/normalize.css” rel=”stylesheet” /><link href=”path/to/node_modules/@blueprintjs/core/lib/css/blueprint.css” rel=”stylesheet” /><link href=”path/to/node_modules/@blueprintjs/icons/lib/css/blueprint-icons.css” rel=”stylesheet” />

Blueprint Components Require the following ES2015 Features

• Map
• Set
• Array.prototype.fill
• Array.prototype.from
• String.prototype.startsWith
• Object.values

TypeScript: Blueprint is written in TypeScript, and it is having its own “.d.ts” file, therefore its “.d.ts” type definitions are distributed in the NPM package and should be resolved automatically by the compiler.

However, you’ll need to install typing for Blueprint’s dependencies before you can consume it:

npm install --save @types/react @types/react-dom

Blueprint’s declaration files require TypeScript 3.8 or newer for certain language features.

Example:

import React from 'react'
import '@blueprintjs/core/lib/css/blueprint.css';
import { Button } from "@blueprintjs/core";

function App() {
    const incrementCounter = () => {
        console.log("Button clicked");
    }
    return (
        <Button intent="success" text="button content" onClick={incrementCounter} />
    );
};

export default App;

Step to Run the Application: Open the terminal and type the following command.

npm start

Output:

Output