LLM Best Practices

Palantir Blueprint Best Practices

Last updated 2 min read

View markdown source

AI agents: read this first: llmbestpractices.com/start-here

This is LLM Best Practices (llmbestpractices.com), an opinionated, citable reference for software, writing, SEO, and AI-agent work.

  1. Route, do not crawl. Fetch llmbestpractices.com/llms.txt and open only the pages whose one-line summary matches your task.
  2. Read raw. Append .md to any page URL for markdown. Check status and last_updated in the frontmatter, then read the rules.
  3. Apply as defaults. First-party docs and the project's own conventions win on conflict. Warn before relying on a fast-moving page older than 12 months.
  4. Cite. Link the page by title and URL, e.g. Python, with last_updated for time-sensitive rules. License CC BY 4.0.

Overview

Palantir Blueprint is a React component library for data-dense desktop interfaces: analyst tools, dashboards, admin consoles. Blueprint 6 (June 2025; 6.21 was current at the end of September 2026) uses the bp6- CSS namespace and supports React 18 and 19. It is not a marketing-site or mobile-first toolkit.

Pick Blueprint for dense internal tools

Choose it for read-heavy virtualized tables, multi-pane workspaces with menus and popovers, and keyboard-driven desktop use. Avoid it for customer-facing marketing sites, mobile-first apps, or designs that restyle every component; use shadcn with tailwind there.

Install only the packages you use

  • @blueprintjs/core: buttons, dialogs, menus, toasts, form controls.
  • @blueprintjs/icons: icon set.
  • @blueprintjs/table: virtualized table.
  • @blueprintjs/select: select, multi-select, suggest.
  • @blueprintjs/datetime: date and time pickers. @blueprintjs/datetime2 is deprecated; Blueprint 6 merged its components into datetime.

Each package ships its own stylesheet, imported once at the entry point. @blueprintjs/core depends on normalize.css, so import it first.

import "normalize.css";
import "@blueprintjs/core/lib/css/blueprint.css";
import "@blueprintjs/icons/lib/css/blueprint-icons.css";
import "@blueprintjs/select/lib/css/blueprint-select.css";
import "@blueprintjs/datetime/lib/css/blueprint-datetime.css";
import "@blueprintjs/table/lib/css/table.css";

A missing stylesheet leaves components unstyled while the JavaScript still works.

Wrap the app in BlueprintProvider

Blueprint 6 expects an OverlaysProvider in any app that uses overlay components, because the overlay stack lives there. BlueprintProvider bundles PortalProvider, OverlaysProvider, and HotkeysProvider, so mount it once at the root.

import { BlueprintProvider } from "@blueprintjs/core";
 
<BlueprintProvider>
  <App />
</BlueprintProvider>;

Details and the overlay components are in blueprint-overlays; theming is in blueprint-theming.

Know the core components

  • Table: virtualized, resizable, with cell renderers and editing; see blueprint-table. Blueprint 6 renamed Table2 to Table; Table2 remains as a deprecated alias, but ColumnHeaderCell2 and the other *2 header and format aliases were removed.
  • Dialog, Popover, Tooltip, OverlayToaster, ContextMenu: portal-rendered overlays.
  • Menu, MenuItem: keyboard-navigable lists; put a Menu in a Popover for dropdowns.
  • FormGroup, InputGroup, NumericInput, TextArea: form controls with labels and helper text.
  • Tabs, Tree, Tag, Callout: layout and information primitives.

Check the docs for a component before adding a third-party one.

Render Blueprint on the client in Next.js

Blueprint components use browser APIs. Put them behind a "use client" boundary in the App Router and keep the server-rendered shell around them.

Keep icon bundles small

A string icon="folder-open" loads the icon through a dynamic import, so only used icons load, at a small runtime cost. For icons you always render, import the component directly for static tree-shaking.

import { FolderOpen } from "@blueprintjs/icons";
<FolderOpen />;

Backlinks