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

It is optimized for building complex, data-dense web interfaces for desktop applications. If you rely heavily on mobile interactions and are looking for a mobile-first UI toolkit, this may not be for you.

View the full documentation ▸

Read our FAQ on the wiki ▸

Read the introductory blog post ▸

Support question? We use the blueprintjs tag on Stack Overflow ▸

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

These are the component libraries we publish to NPM.

• – Core styles & components.
• – Components for interacting with dates and times.
• – Documentation theme for Documentalist data.
• – Scalable interactive table component.
• – Incubator and staging area for new components still under initial development.

These are hosted on GitHub Pages as static web applications.

• docs-app
• landing-app

These private packages define development dependencies and contain build configuration. They adhere to standard NPM package layout—this allows us to keep clear API boundaries for build configuration and isolate groups of devDependencies. In the future, we might publish these packages to allow other Blueprint projects to use this infrastructure outside this monorepo.

• karma-build-scripts
• node-build-scripts
• tslint-config
• webpack-build-scripts

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

Prerequisites: Node.js v8+, Yarn v1.0+

After cloning this repo, run:

1. yarn to install all dependencies.
2. yarn verify to ensure you have all the build tooling working properly.

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

Each library has its own dev script which you can run to watch changes to that package and run the docs application with webpack-dev-server: yarn dev:core, yarn dev:datetime, etc.

• One exception is table—since it has its own dev application, the dev:table script doesn't run the docs site.
  • Run the table dev application using yarn dev in the packages/table-dev-app folder.
• You may also choose to watch changes across all packages by running yarn dev:all from the root directory.

1. Edit the package.json where you wish to change dependencies.
2. Run yarn at the root to update lockfiles.
3. Commit the result.

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), you'll need to run yarn generate-docs-data from the docs-app package to see it reflected in the application. Note that yarn bundle in this package also runs this script.

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/core to see those changes reflected before running any of the dev scripts.

Looking for places to contribute to the codebase? Check out the Status: accepting PRs label.

Read about our contribution guidelines and development practices to give your PR its best chance at getting merged.

This project is made available under the Apache-2.0 License.