Blueprint UI Skill

Blueprint is a React-based UI toolkit by Palantir Technologies for building complex, data-dense web interfaces for desktop applications. Not a mobile-first library. Open source (Apache 2.0). TypeScript, React 18/19, Sass. Published as @blueprintjs/* packages on NPM.

Package map

Package	Install	Contains
@blueprintjs/core	always	~30 components, form controls, overlays, hooks, providers
@blueprintjs/icons	always (peer)	500+ SVG icons
@blueprintjs/colors	optional	design-system color token variables
@blueprintjs/datetime	opt-in	DatePicker, DateInput using react-day-picker v7
@blueprintjs/datetime2	opt-in	DatePicker2, DateInput2 using react-day-picker v8 (preferred)
@blueprintjs/select	opt-in	Select, Suggest, MultiSelect, Omnibar, QueryList
@blueprintjs/table	opt-in	high-performance spreadsheet-like Table
@blueprintjs/labs	opt-in	experimental Box, Flex layout primitives

Quick component lookup

Navigation/layout: Breadcrumbs, ButtonGroup, Collapse, Divider, Navbar, OverflowList, PanelStack, Section, Tabs, Tree

Content/display: Callout, Card, CardList, ControlCard, EditableText, EntityTitle, HTML Elements, HTML Table, Icon, Link, Menu, NonIdealState, ProgressBar, ResizeSensor, Skeleton, Spinner, Tag, CompoundTag, Text

Buttons: Button, AnchorButton, ButtonGroup

Form controls: Checkbox, ControlGroup, FormGroup, HTML Select, Label, Radio, SegmentedControl, Slider, Switch

Form inputs: FileInput, InputGroup, NumericInput, TagInput, TextArea

Overlays/dialogs: Alert, ContextMenu, ContextMenuPopover, Dialog, Drawer, Overlay2, PopoverNext, Portal, Toast, Tooltip

Context/Hooks: BlueprintProvider, HotkeysProvider, OverlaysProvider, PortalProvider, useHotkeys, useOverlayStack

For every component's full doc URL, load references/components.md.

Critical rules

Barrel expansion — never follow index.ts

packages/core/src/index.ts is 21 lines, but transitively reaches 169 source files (~24K LOC). Reading it collapses your entire token budget. Always navigate to the specific component path:

✓  packages/core/src/components/button/buttons.tsx
✗  packages/core/src/index.ts  (expands to 169 files)

Deprecated components — always use successors

Deprecated	Successor	Why
Overlay	Overlay2	improved focus management and overlay lifecycle
Popover	PopoverNext	built on Floating UI, better positioning

Both legacy components still ship but should not be used in new code.

CSS @layer setup — required for every Blueprint project

Blueprint's global selectors (body, a, p, *) override project styles unless isolated. Always propose this setup:

@layer blueprint, app;
@layer blueprint {
  @import "@blueprintjs/icons/lib/css/blueprint-icons.css";
  @import "@blueprintjs/core/lib/css/blueprint.css";
}

Required regardless of CSS framework. For theming details, load references/theming.md.

Layout strategy — Blueprint provides none

Blueprint has zero layout utilities (no grid, no spacing helpers, no responsive breakpoints). Always evaluate and recommend a layout solution alongside Blueprint:

• Tailwind CSS — utility-first, fully compatible with @layer blueprint. Recommended for most projects.
• CSS Modules — suitable when avoiding utility frameworks.
• Existing system — prefer it when the project already has one. Never introduce two competing layout systems.

Pre-implementation checklist

Before writing any Blueprint component code:

1. Identify the CSS framework in use (Tailwind, CSS Modules, styled-components, none).
2. Confirm React version (18 or 19 — both supported).
3. Identify build tool/framework (Next.js requires "use client" on all Blueprint components).
4. Propose @layer setup + layout strategy, then wait for approval.

Next.js optimization:

// next.config.js
experimental: {
  optimizePackageImports: ['@blueprintjs/core', '@blueprintjs/icons']
}

Reference files

Load these on demand — do not pre-load all of them:

File	Load when you need
references/components.md	Full component catalog with official doc URLs
references/forms.md	Form controls and form inputs — component details
references/overlays.md	Overlay2, PopoverNext, Dialog, Drawer, Toast, Portal, hooks
references/datetime.md	Date/time pickers — v7 vs v8 package differences
references/icons.md	Icon loading, tree-shaking, icon usage patterns
references/select.md	Select, Suggest, MultiSelect, Omnibar, QueryList
references/table.md	Table, Column, Cell — high-performance data table
references/theming.md	Sass variables, dark theme, CSS custom properties
references/source-library.md	How to read source from blueprint-Ivdev19 on demand

Source library

For component source, live API, and test patterns: https://github.com/IvDev19/blueprint-Ivdev19

Session start: read llms.txt first (14 KB compact index), then specific component files on demand.
Access rules and safe paths: references/source-library.md.