Blueprint – A React-based UI toolkit for the web

Build complex, data-dense interfaces with ease

Blueprint is a collection of React UI components that cover the majority of the common interface elements, patterns, and interactions on the web. Using Blueprint ensures that you’ll end up with an elegant and easy-to-use UI, freeing you to focus on building your product—not the atomic pieces that comprise it.

Go to documentation View GitHub repository

Productivity

Enjoy a set of high quality generic components that you can use out of the box.

Composition

React components and TypeScript interfaces are easy to compose together.

Custom styles

Styles are built with Sass and designed to be flexible and customizable.

Design system

Universal design concepts and modifiers are applicable across components.

Types and tests

TypeScript makes developing with Blueprint faster and more predictable with static types.

Accessibility

Color combinations and keyboard interactions have been carefully crafted to be accessible.

Let’s get started

Install via NPM

> npm install --save @blueprintjs/core

Import and use the components

import {
    Button,
    Menu,
    MenuItem,
    MenuDivider,
    Popover,
    Position
} from "@blueprintjs/core";

const menu = (
    <Menu>
        <MenuItem text="New" />
        <MenuItem text="Open" />
        <MenuItem text="Save" />
        <MenuDivider />
        <MenuItem text="Settings..." />
    </Menu>
);

<Popover content={menu} position={Position.BOTTOM_RIGHT}>
    <Button text="Actions" />
</Popover>

Learn and contribute!

Go to documentation View GitHub repository

Blueprint is an open source project
developed at Palantir.

We’re hiring designers and engineers!

View openings

Licensed under BSD