Blueprint
Blueprint is a React-based UI toolkit for the web by Palantir Technologies. 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. It is built with TypeScript, React 18, and Sass/SCSS. It provides a comprehensive set of components including form controls, overlays, date/time pickers, selects, and a scalable table component. Open source under the Apache 2.0 license. Published as scoped packages under @blueprintjs on NPM.
Overview
- Quick Start: Installation instructions and quick start guide for using Blueprint in your project, as well as a breakdown of what packages exist.
- Getting Started: Installation instructions and quick start guide for using Blueprint in your project. More detail provided about JSX vs TSX usage as well as Vanilla JS APIs.
- Reading the Docs: Guide to navigating and understanding the Blueprint documentation site.
- Principles: Design principles and philosophy behind Blueprint's component library.
Core
- Accessibility: Guidelines and patterns for building accessible interfaces with Blueprint.
- Classes: CSS utility classes for common styling patterns and layout helpers.
- Colors: Design system color palette with qualitative, sequential, and diverging color schemes. Specific CSS usage of colors is detailed here.
- Typography: Typography styles including headings, running text, links, and preformatted text. In BP these are largely CSS patterns.
- Variables: Sass and CSS variables for customizing Blueprint's theme and appearance.
Components
- Breadcrumbs: Navigation breadcrumb trail with overflow handling.
- Buttons: Button component with intent-based styling, icons, and loading states.
- Button Group: Arranges multiple buttons in a horizontal or vertical group.
- Callout: Informational callout box with optional icon and intent styling.
- Card: Bounded container for content with optional elevation and interactivity.
- Card List: Vertical list of interactive cards within a bounded container.
- Control Card: Card component that wraps a form control like a checkbox, radio, or switch.
- Collapse: Animated container that shows or hides its content with a smooth transition.
- Divider: Thin line separator between UI elements, works in both horizontal and vertical layouts.
- Editable Text: Inline text element that becomes an editable input on interaction.
- Entity Title: Title component for entities with optional icon, heading, subtitle, and tags.
- HTML Elements: Styled wrapper for native HTML elements with Blueprint styling applied.
- HTML Table: Styled HTML table element with Blueprint theming and compact/striped options.
- Hotkeys Target: Component for binding keyboard shortcuts to elements.
- Icon: Renders Blueprint icons as SVGs with customizable size, color, and intent.
- Link: Styled anchor element with optional icon and Blueprint theming.
- Menu: Vertical list of interactive menu items, often used inside popovers and dropdowns.
- Navbar: Horizontal navigation bar with support for groups, headings, and dividers.
- Non-ideal State: Placeholder component for empty states, errors, or loading scenarios.
- Overflow List: OverflowList takes a generic list of items and renders as many items as can fit inside its container. It automatically collapses items that don't fit into available space.
- Panel Stack: PanelStack manages a stack of panels and displays only the topmost panel. Each panel appears with a header containing a "back" button to return to the previous panel.
- Progress Bar: Horizontal bar indicating determinate or indeterminate progress.
- Resize Sensor: Utility component that detects and reports element size changes.
- Section: Collapsible section container with a title bar and optional right element.
- Skeleton: Placeholder loading animation applied to text and block elements.
- Spinner: Circular loading spinner with configurable size and intent.
- Tabs: Tabbed interface component for switching between views.
- Tag: Small label component with intent styling, icons, and optional remove button.
- Compound Tag: Tag with a left label and a right value section for key-value display.
- Text: Text component that handles overflow with ellipsis and optional title attribute.
- Tree: Hierarchical tree view with expandable/collapsible nodes.
Form Controls
- Form Group: Groups a label, helper text, and a form control together.
- Control Group: Renders multiple form controls as a single connected group.
- Label: Form label element with optional helper text.
- Checkbox: Checkbox control with label, indeterminate state support, and alignment options.
- Radio: Radio button component and radio group for selecting one option from a set.
- HTML Select: Styled wrapper around the native HTML select element.
- Segmented Control: Linear set of two or more segments acting as mutually exclusive buttons.
- Slider: Slider and range slider components for selecting numeric values.
- Switch: Toggle switch for boolean on/off states.
Form Inputs
- Input Group: Text input with optional left icon and right element.
- Text Area: Multi-line text input with auto-resizing support.
- File Input: Styled file upload input with customizable button text.
- Numeric Input: Input for numeric values with increment/decrement buttons and configurable bounds.
- Tag Input: Input that manages a list of tag values with add and remove functionality.
Overlays
- Overlay: [DEPRECATED, use Overlay2] Generic overlay wrapper that renders content above the page with a backdrop.
- Overlay2: Next-generation overlay component with improved focus management and lifecycle.
- Portal: Renders children into a DOM node outside the parent component hierarchy.
- Alert: Modal alert dialog for confirming user actions with configurable intent buttons.
- Context Menu: Right-click context menu triggered on an element.
- Context Menu Popover: Popover-based context menu with configurable positioning.
- Dialog: Modal dialog with header, body, and footer sections.
- Drawer: Panel that slides in from the edge of the screen.
- Popover: [DEPRECATED, use PopoverNext] Floating container that appears next to a target element, used for tooltips, menus, and forms.
- Popover Next: Next-generation Popover built on Floating UI with improved positioning and performance.
- Toast: Ephemeral notification message that appears and auto-dismisses.
- Tooltip: Lightweight popover for showing additional information on hover or focus.
Context Providers
- Blueprint Provider: Top-level provider that configures global Blueprint settings.
- Hotkeys Provider: Provider for the hotkeys system that enables keyboard shortcut registration.
- Overlays Provider: Provider that manages the overlay stack for proper focus and z-index handling.
- Portal Provider: Provider that configures the container element for all portaled content.
Hooks
- useHotkeys: Hook for registering keyboard shortcuts with automatic binding and cleanup.
- useOverlayStack: Hook for interacting with the overlay stack to manage overlay lifecycle.
DateTime
- Date Picker: Calendar-based component for selecting a single date.
- Date Input: Text input that parses and formats dates with an optional calendar popover.
- Date Range Picker: Two-calendar component for selecting a date range with shortcut presets.
- Date Range Input: Dual text inputs for entering a date range with calendar popover.
- Time Picker: Input for selecting a time of day with hour, minute, second, and millisecond precision.
- Timezone Select: Dropdown for selecting a timezone from the IANA timezone database.
Icons
- Loading Icons: Guide to loading and bundling Blueprint icons efficiently with tree-shaking.
- Icons List: Searchable catalog of all 500+ Blueprint icons.
Select
- Select: Single-item selector with built-in filtering and keyboard navigation.
- Suggest: Text input with autocomplete suggestions from a filterable list.
- Multi Select: Multi-item selector that renders selected items as tags.
- Omnibar: Full-screen overlay search input for searching across all items.
- Query List: Headless component that manages item filtering and keyboard interaction for list selection.
Table
- Features: Overview of table features including sorting, filtering, selection, and resizing.
- API: Complete API reference for table components including Table, Column, Cell, and related types.