Blueprint는 Palantir가 만든 React 기반 UI 툴킷으로, 데이터 밀집형 데스크톱 웹 애플리케이션(관리자 도구, 대시보드 등)을 위해 최적화된 컴포넌트 라이브러리입니다. README에 명시된 대로 모바일 우선 툴킷이 아니며, 버튼·다이얼로그·테이블·날짜선택기 등 수십 개의 컴포넌트를 @blueprintjs/* npm 패키지들로 나누어 제공하는 모노레포입니다.
pnpm 워크스페이스(packages/*) 기반 모노레포이며 Nx가 빌드/테스트/린트 태스크를 패키지 간 의존성 순서대로 오케스트레이션하고, 릴리스 준비는 Lerna-Lite가 담당합니다(package.json의 nx run-many 스크립트들로 확인 가능). 각 컴포넌트 패키지(core 등)는 동일한 구조를 따릅니다: 컴포넌트별로 component.tsx(로직) + _component.scss(스타일) + Component.stories.tsx(Storybook) + component.mdx(문서) + component.test.tsx(vitest 테스트)가 한 디렉토리에 모여 있습니다(예: components/alert/, components/dialog/). 디자인 토큰은 packages/colors의 Sass 변수(_colors.scss)와 TS 객체(Colors)로 정의되고, core 패키지는 build:tokens → build:sass 단계를 거쳐 이를 CSS 변수와 blueprint.css로 변환합니다. TS 소스는 tsc로 esm/cjs/esnext 세 포맷으로 각각 컴파일되어 다양한 번들러 환경을 지원합니다. .storybook/main.ts는 core/datetime/select/table 등 여러 패키지의 stories 파일을 한 곳에 모아 워크스페이스 별칭(alias)으로 연결해 로컬 카탈로그를 띄우고, Chromatic으로 시각적 회귀 테스트를 수행합니다.
- STEP 01
pnpm install을 실행하면 .nvmrc에 명시된 Node 24.11+ 와 고정 pnpm 11.3.0 버전을 요구하는 것을 확인하게 되고, 수십 개 packages/* 워크스페이스의 의존성이 한 번에 설치됩니다.
- STEP 02
pnpm dev:core(core+icons+docs-app 동시 watch) 같은 스크립트를 돌리면 compile:esm(tsc)과 compile:css(sass-compile)가 병렬로 돌아가며 lib/ 디렉토리에 esm/cjs/esnext 산출물이 생기는 것을 눈으로 확인할 수 있습니다.
- STEP 03
pnpm storybook(포트 6006)을 실행하면 packages/{core,datetime,labs,select,table}/src의 *.stories.tsx 파일들이 모여 Button, Dialog, Table 등 실제 컴포넌트를 브라우저에서 바로 조작해볼 수 있는 카탈로그가 뜹니다.
- STEP 04
pnpm test(nx run-many -t test)를 돌리면 core 패키지의 경우 typeCheck → iso test(vitest.config.isotest.mts) → vitest 순으로 실행되며, alert.test.tsx·button.test.tsx 등 컴포넌트별 테스트 결과가 패키지마다 출력됩니다.
- STEP 05
pnpm verify(compile → dist → test/lint/format-check 동시 실행)를 돌리면 CI(.circleci/config.yml)와 동일한 전체 검증 게이트를 로컬에서 체감하게 되며, 실패 시 어느 패키지의 어느 단계인지 Nx 로그로 구분됩니다.
- STEP 06
pnpm site로 docs-app/landing-app의 dist 산출물을 site/ 폴더에 복사해 http-server로 띄우면 blueprintjs.com과 동일한 정적 문서 사이트를 로컬에서 확인할 수 있습니다.
실행하면 @blueprintjs/core, icons, datetime, select, table, colors 등 패키지별로 esm/cjs/esnext 빌드 산출물과 blueprint.css/디자인 토큰이 생성되고, Storybook 카탈로그에서 모든 컴포넌트를 직접 조작해볼 수 있으며, vitest 테스트 결과와 docs-app 정적 문서 사이트까지 손에 잡히게 됩니다. 결과적으로 React 18/19에서 바로 쓸 수 있는 데스크톱형 UI 컴포넌트 세트(버튼, 다이얼로그, 스프레드시트형 테이블 등)와 그 설계 토큰을 얻습니다.
README에 명시된 대로 모바일 우선이 아니라 데스크톱/데이터 밀집 애플리케이션에 최적화되어 있어 모바일 UI에는 부적합할 수 있습니다.
Node 24.11+와 pnpm 11.3.0으로 버전이 고정되어 있어 구버전 환경이나 npm/yarn 사용 시 그대로 재현되지 않을 가능성이 있습니다.
Nx/Lerna로 오케스트레이션되는 대형 모노레포라 전체 pnpm install과 compile/dist 빌드에 상당한 시간과 디스크 공간이 소요될 수 있습니다.
table, datetime처럼 별도 dev:table, dev:datetime 스크립트가 필요한 패키지가 있어, 전체 기능을 보려면 기본 dev 스크립트만으로는 부족할 수 있습니다.
이미 다단계 검증을 통과한 저장소이므로, 패키지별 src+scss+stories+test+mdx라는 일관된 구조와 package.json 스크립트·Nx/Lerna 설정만으로도 설치 없이 신뢰할 만한 판단이 가능합니다. Palantir 규모의 실무용 React 컴포넌트 라이브러리(특히 데이터 밀집형 데스크톱 웹앱)를 찾는 팀에 적합하며, 경량 의존성이나 모바일 퍼스트 UI를 원한다면 다른 선택지를 고려하는 편이 낫습니다.