A React-based UI toolkit for the web
Alternatives To Blueprint
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Awesome React Components37,045
25 days ago2cc0-1.0
Curated List of React Components & Libraries.
Sheetjs33,6144,3793,8162 months ago170March 24, 2022129apache-2.0JavaScript
📗 SheetJS Spreadsheet Data Toolkit -- New home
Table22,5601,7701,417a day ago217May 16, 2022173mitTypeScript
🤖 Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table
Blueprint20,0841,0394082 hours ago271July 28, 2023679apache-2.0TypeScript
A React-based UI toolkit for the web
Ag Grid10,8613235053 hours ago76July 28, 202370otherTypeScript
The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript.
X Render6,37114911 days ago485July 13, 202318TypeScript
🚴‍♀️ 阿里 - 很易用的中后台「表单 / 表格 / 图表」解决方案
Tabulator5,690317112 days ago85July 23, 2023131mitJavaScript
Interactive Tables and Data Grids for JavaScript
React Datasheet5,19230247 months ago49May 27, 2022127mitJavaScript
Excel-like data grid (table) component for React
Reactdatagrid3,472202 months ago180July 31, 202373otherJavaScript
Empower Your Data with the best React Data Grid there is
Material Table3,4402641773 months ago193June 18, 202316mitJavaScript
Datatable for React based on material-ui's table with additional features
Alternatives To Blueprint
Select To Compare

Alternative Project Comparisons

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 **


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


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


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 (⚠️ experimental).
  • npm – Components for selecting items from a list.
  • npm – Scalable & interactive spreadsheet-like table component.


These are hosted on GitHub Pages as static web applications:

  • docs-app – Documentation site at
  • landing-app – Landing page at

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.


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


Lerna manages inter-package dependencies in this monorepo. Builds are orchestrated via lerna run and NPM scripts.

Prerequisites: Node.js v18+ (see version specified in .nvmrc), Yarn v1.22 (see version specified in .yarnrc)

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.
  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.

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 exaclty 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.


This project is made available under the Apache 2.0 License.

Popular Reactjs Projects
Popular Table Projects
Popular Web User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.