blueprint README

The project's README from github.com/palantir/blueprint. As one markdown file: README.md.

Autorelease

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.

Applications

These are hosted on GitHub Pages as static web applications:

These are used as development playground environments:

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.

Contributing

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

Development

pnpm 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 v24.11+ (see version specified in .nvmrc), pnpm v10.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 pnpm as the Node package manager.
  3. pnpm install 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"
      (reset this by running npm config delete script-shell)
  5. pnpm 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.
  6. (Optional) Run pnpm dev:demo to start the demo app and verify your setup is working.

Incorporating upstream changes

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

Developing libraries

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

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 pnpm compile from packages/docs-data to see changes reflected in the application. For simplicity, an alias script pnpm 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 pnpm compile in packages/icons to see those changes reflected before running any of the dev scripts.

Thanks

Chromatic

Thanks to Chromatic for providing the visual testing platform that helps us review UI changes and catch visual regressions.

License

This project is made available under the Apache 2.0 License.

blueprint (palantir/blueprint)

Searching Database…

22.1K ·GitHub
Blueprint
Что это такое?Blueprint — это набор UI-компонентов от Palantir на основе React для веба: библиотека готовых компонентов, оформленных через Sass, написанных на TypeScript и распространяемых по лицензии Apache 2.0.
Это полноценный фреймворк или библиотека, которую я подключу к существующему React-приложению?Это библиотека, а не фреймворк: это монорепозиторий из независимых пакетов компонентов со стилями на Sass, которые вы комбинируете в своём React-приложении. Остальной стек она за вас не выбирает.
Как настроить окружение для разработки?Склонируйте репозиторий, выполните pnpm install в корне, затем pnpm verify — эта команда проверит, что весь инструментарий сборки работает как надо.
Что должно быть установлено, чтобы проект собрался?Node.js 24.14.1 или новее и pnpm 11.3.0 — обе версии зафиксированы в поле engines репозитория. На Windows дополнительно нужен git-bash, причём настройка script-shell в npm должна указывать на него.
Есть ли подводные камни при настройке?Сейчас pnpm verify может выдавать некоторые ошибки даже при полностью корректной настройке, так что несколько красных сообщений сразу после установки не обязательно означают, что вы что-то сделали не так.
Это только для веба или есть нативные и мобильные версии?Только веб: Blueprint рендерит React-компоненты в браузере, нативных версий для десктопа или мобильных платформ нет.
Какие пакеты компонентов входят в монорепозиторий?Помимо основного набора компонентов есть отдельные пакеты для иконок, виджетов даты и времени, селектов и таблиц, а также вспомогательные приложения с документацией, демо и лендингом.
Могу ли я смотреть компоненты локально во время разработки?Да — pnpm dev следит за всеми пакетами и запускает приложение документации через webpack-dev-server, у отдельных библиотек есть свои скрипты вроде pnpm dev:table, а pnpm dev:demo запускает отдельное демо-приложение.
Как создаётся документация для всех этих компонентов?Она хранится прямо в исходном коде: JSDoc-комментарии в файлах .tsx и KSS-разметка в файлах .scss извлекаются инструментом Documentalist в статический JSON, на котором работает приложение документации.
Как команда ловит визуальные регрессии?Они используют Chromatic — платформу визуального тестирования, — чтобы просматривать изменения интерфейса и отлавливать визуальные регрессии до релиза.
What are similar projects?mdb-ui-kit, fluentui, tabler, Semantic-UI-React, material-components-web, daisyui, arc-library, css
Which topics is it in?table, system, scss, sass, toolkit, icons, components, design-system, component-library, design, ui-components, css
Creator
palantir
Size
397.6 MB
Stars
22.1K
Updated
CommitOct 16Release@blueprintjs/[email protected]Sep 30
Age
9y
Commits · 90 Days