Convert Figma logo to code with AI

palantir logoblueprint

A React-based UI toolkit for the web

20,694
2,170
20,694
741

Top Related Projects

18,417

Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

An enterprise-class UI design language and React UI library

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.

Bootstrap components built with React

A utility-first CSS framework for rapid UI development.

37,442

⚡️ Simple, Modular & Accessible UI Components for your React Applications

Quick Overview

Blueprint is a React-based UI toolkit for building complex, data-dense web interfaces. It provides a collection of reusable components designed for the desktop application experience, with a focus on performance and accessibility.

Pros

  • Comprehensive set of UI components tailored for data-heavy applications
  • Strong focus on accessibility and keyboard navigation
  • Extensive documentation and examples
  • TypeScript support for improved developer experience

Cons

  • Steep learning curve due to the large API surface
  • Opinionated design system may not fit all project aesthetics
  • Large bundle size if not properly tree-shaken
  • Limited mobile-first design considerations

Code Examples

  1. Creating a button with an icon:
import { Button, Intent } from "@blueprintjs/core";

const MyButton = () => (
  <Button icon="refresh" intent={Intent.PRIMARY}>
    Refresh
  </Button>
);
  1. Implementing a customizable date picker:
import { DatePicker, DatePickerShortcut } from "@blueprintjs/datetime";

const MyDatePicker = () => (
  <DatePicker
    shortcuts={[
      { date: new Date(), label: "Today" },
      { date: new Date().setDate(new Date().getDate() + 7), label: "In a week" },
    ]}
    onChange={(selectedDate) => console.log(selectedDate)}
  />
);
  1. Creating a toast notification:
import { Position, Toaster } from "@blueprintjs/core";

const AppToaster = Toaster.create({
  position: Position.TOP,
});

const showToast = () => {
  AppToaster.show({
    message: "Toast message",
    intent: "success",
    icon: "tick",
  });
};

Getting Started

To start using Blueprint in your React project:

  1. Install the necessary packages:
npm install @blueprintjs/core @blueprintjs/icons
  1. Import the CSS in your app's entry point:
import "@blueprintjs/core/lib/css/blueprint.css";
import "@blueprintjs/icons/lib/css/blueprint-icons.css";
  1. Use Blueprint components in your React components:
import React from "react";
import { Button, Intent } from "@blueprintjs/core";

const MyComponent = () => (
  <Button intent={Intent.SUCCESS} icon="tick">
    Confirm
  </Button>
);

export default MyComponent;

Competitor Comparisons

18,417

Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

Pros of Fluent UI

  • More comprehensive component library, including mobile and web components
  • Stronger integration with Microsoft ecosystem and tools
  • More frequent updates and active development

Cons of Fluent UI

  • Steeper learning curve due to larger API surface
  • Less flexibility for customization compared to Blueprint
  • Heavier bundle size, which may impact performance for smaller applications

Code Comparison

Blueprint example:

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

<Button intent={Intent.PRIMARY} text="Click me" />

Fluent UI example:

import { PrimaryButton } from "@fluentui/react";

<PrimaryButton text="Click me" />

Both libraries offer similar component APIs, but Fluent UI tends to have more specialized components (e.g., PrimaryButton) while Blueprint uses props to modify behavior (e.g., intent prop).

Blueprint focuses on desktop web applications and provides a cohesive set of UI components with a consistent look and feel. It excels in data-heavy applications and offers excellent TypeScript support.

Fluent UI, on the other hand, provides a broader range of components for various platforms and aligns closely with Microsoft's design language. It's particularly well-suited for applications that need to integrate seamlessly with Microsoft products and services.

Ultimately, the choice between these libraries depends on the specific requirements of your project, target platforms, and desired ecosystem integration.

An enterprise-class UI design language and React UI library

Pros of Ant Design

  • Larger ecosystem with more components and integrations
  • Better internationalization support
  • More active community and frequent updates

Cons of Ant Design

  • Steeper learning curve due to extensive API
  • Heavier bundle size compared to Blueprint
  • Less customizable default styling

Code Comparison

Ant Design button example:

import { Button } from 'antd';

const MyComponent = () => (
  <Button type="primary">Click me</Button>
);

Blueprint button example:

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

const MyComponent = () => (
  <Button intent="primary">Click me</Button>
);

Both libraries offer similar component APIs, but Ant Design tends to use more props for customization, while Blueprint often uses specific prop names (like "intent" instead of "type") for similar functionality.

Ant Design provides a more comprehensive set of components and features, making it suitable for large-scale applications with diverse requirements. Blueprint, on the other hand, offers a more lightweight and focused approach, which can be beneficial for smaller projects or those requiring a specific set of components.

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.

Pros of Material-UI

  • Larger community and ecosystem, with more third-party components and resources
  • More comprehensive theming system, allowing for easier customization
  • Better support for mobile and responsive design out of the box

Cons of Material-UI

  • Steeper learning curve due to more complex API and component structure
  • Larger bundle size, which may impact performance for smaller applications
  • Less focus on enterprise-specific components and use cases

Code Comparison

Material-UI:

import { Button, TextField } from '@mui/material';

<Button variant="contained" color="primary">
  Click me
</Button>
<TextField label="Enter text" variant="outlined" />

Blueprint:

import { Button, InputGroup } from '@blueprintjs/core';

<Button intent="primary">Click me</Button>
<InputGroup placeholder="Enter text" />

Both libraries offer similar components, but Material-UI tends to have more props and customization options, while Blueprint focuses on simplicity and enterprise-specific use cases. Material-UI's styling approach is more flexible, using CSS-in-JS, while Blueprint relies more on traditional CSS classes. The syntax and component names differ slightly, but the overall structure is comparable.

Bootstrap components built with React

Pros of React-Bootstrap

  • Wider adoption and community support
  • Closer alignment with standard Bootstrap, making it familiar to Bootstrap users
  • Extensive documentation and examples

Cons of React-Bootstrap

  • Less comprehensive component set compared to Blueprint
  • May require additional styling for complex enterprise applications
  • Slower release cycle for new features and updates

Code Comparison

React-Bootstrap:

import { Button } from 'react-bootstrap';

<Button variant="primary">Click me</Button>

Blueprint:

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

<Button intent="primary">Click me</Button>

Summary

React-Bootstrap is a popular choice for developers familiar with Bootstrap, offering a wide range of components that closely mirror the original Bootstrap library. It benefits from extensive community support and documentation.

Blueprint, on the other hand, provides a more comprehensive set of components tailored for complex enterprise applications. It offers a consistent design language and advanced features out of the box.

While React-Bootstrap may be easier to adopt for teams already using Bootstrap, Blueprint excels in providing a cohesive and feature-rich UI toolkit for data-heavy applications. The choice between the two depends on the specific needs of the project and the development team's preferences.

A utility-first CSS framework for rapid UI development.

Pros of Tailwind CSS

  • Highly customizable and flexible utility-first approach
  • Smaller bundle size and better performance
  • Easier to maintain and scale in large projects

Cons of Tailwind CSS

  • Steeper learning curve for developers used to traditional CSS
  • Can lead to verbose HTML markup
  • Less out-of-the-box UI components compared to Blueprint

Code Comparison

Tailwind CSS:

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Click me
</button>

Blueprint:

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

<Button intent="primary" text="Click me" />

Tailwind CSS uses utility classes directly in HTML, while Blueprint provides pre-built React components. Tailwind offers more granular control over styles, whereas Blueprint provides a consistent design system out of the box.

Tailwind CSS is ideal for projects requiring high customization and performance, while Blueprint is better suited for rapid development of enterprise applications with a consistent UI. The choice between the two depends on project requirements, team preferences, and development goals.

37,442

⚡️ Simple, Modular & Accessible UI Components for your React Applications

Pros of Chakra UI

  • More lightweight and flexible, allowing for easier customization
  • Better support for responsive design out of the box
  • Stronger focus on accessibility and follows WAI-ARIA guidelines

Cons of Chakra UI

  • Less comprehensive component library compared to Blueprint
  • Fewer enterprise-focused features and components
  • Smaller community and ecosystem

Code Comparison

Chakra UI:

import { Button } from "@chakra-ui/react"

function MyComponent() {
  return <Button colorScheme="blue">Click me</Button>
}

Blueprint:

import { Button } from "@blueprintjs/core"

function MyComponent() {
  return <Button intent="primary">Click me</Button>
}

Both Chakra UI and Blueprint are popular React component libraries, but they cater to different needs. Chakra UI is more suitable for projects that require a lightweight, flexible solution with strong accessibility support. It's particularly well-suited for responsive designs and offers easier customization.

On the other hand, Blueprint is more comprehensive and tailored for enterprise applications. It provides a wider range of components and features specifically designed for complex data-heavy interfaces.

The code comparison shows that both libraries offer similar basic components, but with slightly different prop naming conventions. Chakra UI uses colorScheme for button styling, while Blueprint uses intent.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Blueprint CircleCI

Blueprint is a React-based UI toolkit for the web.

It is optimized for building complex, data-dense web interfaces for desktop applications which run in modern browsers. This is not a mobile-first UI toolkit.

Read the introductory blog post ▸

View the full documentation ▸

Try it out on CodeSandbox ▸

Read frequently asked questions (FAQ) on the wiki ▸

Changelog

Blueprint's change log and migration guides for major versions live on the repo's Github wiki.

Packages

This repository contains multiple projects in the packages/ directory that fall into 3 categories:

Libraries

These are the component libraries we publish to NPM.

  • npm – Design system color variables.
  • npm – Core styles & components.
  • npm – Components for interacting with dates and times.
  • npm – Next-generation components for interacting with dates and times.
  • npm – APIs for displaying icons (contains both SVG and icon font implementations).
  • npm – Theme for Monaco Editor (:warning: experimental).
  • npm – Components for selecting items from a list.
  • npm – Scalable & interactive spreadsheet-like table component.

Applications

These are hosted on GitHub Pages as static web applications:

  • docs-app – Documentation site at blueprintjs.com/docs
  • landing-app – Landing page at blueprintjs.com

These are used as development playground environments:

  • demo-app – demo page that shows many components all on the same page in light and dark themes
  • table-dev-app – demo page that supports manual testing of all table features

Build tooling

These packages define development dependencies and contain build configuration. They adhere to the standard NPM package layout, which allows us to keep clear API boundaries for build configuration and isolate groups of devDependencies. They are published to NPM in order to allow other Blueprint-related projects to use this infrastructure outside this monorepo.

  • npm – Documentation theme for Documentalist data.
  • npm – ESLint configuration used in this repo and recommended for Blueprint-related projects.
  • npm – implementations for custom ESLint rules which enforce best practices for Blueprint usage.
  • npm – Karma test runner configuration.
  • npm – various utility scripts for building Sass sources, linting Sass & TypeScript, generating Sass & Less variables, and optimizing icon SVGs.
  • npm – implementations for custom stylelint rules which enforce best practices for Blueprint usage.
  • npm – various utility functions used in Blueprint test suites.
  • npm – TSLint configuration used in this repo and recommended for Blueprint-related projects (should be installed by @blueprintjs/eslint-config, not directly).
  • npm – Webpack build configuration for Blueprint projects.

Contributing

Looking for places to contribute to the codebase? First read the contribution guidelines, then check out the "help wanted" label.

Development

Yarn manages third-party and inter-package dependencies in this monorepo. Builds are orchestrated via Nx's task runner and NPM scripts. Lerna-Lite is used to prepare releases.

Prerequisites: Node.js v20.11+ (see version specified in .nvmrc), Yarn v4.x (see version specified in package.json)

One-time setup

First, ensure you have nvm (Node Version Manager) installed.

After cloning this repo, run:

  1. nvm use to use the supported Node version for Blueprint development.
  2. corepack enable to activate Yarn as the Node package manager.
  3. yarn to install all dependencies for the monorepo.
    1. If seeing an error like "Error when performing the request ...", you may be using a VPN that needs to be disabled to install the dependencies.
  4. If running on Windows:
    1. npm install -g windows-build-tools to install build tools globally
    2. Ensure bash is your configured script-shell by running:
      npm config set script-shell "C:\\Program Files\\git\\bin\\bash.exe"
  5. yarn verify to ensure you have all the build tooling working properly.
    1. There may currently be some errors when running this step, even though everything is set up properly, see https://github.com/palantir/blueprint/issues/6926 for more info.

Incorporating upstream changes

If you were previously in a working state and have just pulled new code from develop:

  • If there were package dependency changes, run yarn at the root.
    • This command is very quick if there are no new things to install.
  • Run yarn compile to get the latest built versions of the library packages in this repo.
    • This command is quicker than yarn verify since it doesn't build the application packages (docs-app, landing-app, etc.) or run tests

Developing libraries

There are a few ways to run development scripts, here they are listed from simplest to more advanced usage:

  • Run yarn dev from the root directory to watch changes across all packages and run the docs application with webpack-dev-server.
  • Alternately, most libraries have a dev script to run the docs app and watch changes to only that package:
    • yarn dev:core
    • yarn dev:docs
    • yarn dev:datetime
    • yarn dev:select
    • yarn dev:table
  • Lastly, if you want to control exactly which dev scripts are run and view the console output in the cleanest way, we recommend opening separate terminal windows or splits and running local package dev tasks in each one. This is the recommended workflow for frequent contributors and advanced developers. For example, to test changes in the core and icons packages, you would run the following in separate terminals:
    • cd packages/core && yarn dev
    • cd packages/icons && yarn dev
    • cd packages/docs-app && yarn dev

Updating documentation

Much of Blueprint's documentation lives inside source code as JSDoc comments in .tsx files and KSS markup in .scss files. This documentation is extracted and converted into static JSON data using documentalist.

If you are updating documentation sources (not the docs UI code which lives in packages/docs-app or the docs theme in packages/docs-theme), you'll need to run yarn compile from packages/docs-data to see changes reflected in the application. For simplicity, an alias script yarn docs-data exists in the root to minimize directory hopping.

Updating icons

The One-time setup and Incorporating upstream changes steps should produce the generated source code in this repo used to build the icons documentation. This is sufficient for most development workflows.

If you are updating icons or adding new ones, you'll need to run yarn compile in packages/icons to see those changes reflected before running any of the dev scripts.

License

This project is made available under the Apache 2.0 License.

NPM DownloadsLast 30 Days