or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

context-hooks.mdcore-components.mddata-display.mdform-components.mdindex.mdinteractive-components.mdnavigation-components.mdoverlay-system.mdstyling-system.md
tile.json

tessl/npm-blueprintjs--core

Comprehensive React UI component library for building complex, data-dense desktop web applications.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@blueprintjs/core@5.19.x

To install, run

npx @tessl/cli install tessl/npm-blueprintjs--core@5.19.0

index.mddocs/

BlueprintJS Core

BlueprintJS Core is a comprehensive React UI component library designed for building complex, data-dense web applications for desktop environments. It provides a complete set of foundational UI components including buttons, forms, overlays, navigation, and layout components, all built with TypeScript for type safety and accessibility.

Package Information

  • Package Name: @blueprintjs/core
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @blueprintjs/core

Core Imports

import { Button, Card, Classes, Intent } from "@blueprintjs/core";

For CommonJS:

const { Button, Card, Classes, Intent } = require("@blueprintjs/core");

Basic Usage

import React from "react";
import { Button, Card, Intent, Callout } from "@blueprintjs/core";

function App() {
  return (
    <Card elevation={2}>
      <h3>Welcome to Blueprint</h3>
      <Callout intent={Intent.PRIMARY}>
        This is a primary callout with information.
      </Callout>
      <Button 
        intent={Intent.SUCCESS} 
        large 
        onClick={() => alert("Hello Blueprint!")}
      >
        Click me
      </Button>
    </Card>
  );
}

Architecture

BlueprintJS Core is built around several foundational systems:

  • Component Library: 133+ React components covering forms, navigation, overlays, data display, and layout
  • Design System: Consistent styling with Classes namespace, intents, elevations, and size variations
  • Context System: React Context providers for themes, hotkeys, overlays, and portals
  • Hook System: Custom hooks for hotkeys, async values, overlay management, and previous value tracking
  • Accessibility: Built-in ARIA support, focus management, and keyboard navigation
  • Type Safety: Complete TypeScript definitions with generic type preservation

Capabilities

Core Components

Essential UI building blocks including buttons, cards, callouts, and layout components. These form the foundation for most Blueprint applications.

// Button components
function Button(props: ButtonProps): JSX.Element;
function AnchorButton(props: AnchorButtonProps): JSX.Element;

// Card components  
function Card(props: CardProps): JSX.Element;
function CardList(props: CardListProps): JSX.Element;

// Callout and messaging
function Callout(props: CalloutProps): JSX.Element;
function Alert(props: AlertProps): JSX.Element;

Core Components

Form Components

Comprehensive form controls including inputs, checkboxes, radios, switches, and validation support. All components support controlled and uncontrolled modes.

// Input components
function InputGroup(props: InputGroupProps): JSX.Element;
function NumericInput(props: NumericInputProps): JSX.Element;
function TextArea(props: TextAreaProps): JSX.Element;

// Control components
function Checkbox(props: CheckboxProps): JSX.Element;
function Radio(props: RadioProps): JSX.Element;
function Switch(props: SwitchProps): JSX.Element;

Form Components

Overlay System

Advanced overlay components including dialogs, popovers, tooltips, and drawer panels. Built on Popper.js with comprehensive positioning options.

// Dialog components
function Dialog(props: DialogProps): JSX.Element;
function MultistepDialog(props: MultistepDialogProps): JSX.Element;

// Popover components
function Popover(props: PopoverProps): JSX.Element;
function Tooltip(props: TooltipProps): JSX.Element;

// Panel components
function Drawer(props: DrawerProps): JSX.Element;

Overlay System

Navigation Components

Navigation and menu components for building application structure including breadcrumbs, navbars, tabs, and context menus.

// Navigation structure
function Navbar(props: NavbarProps): JSX.Element;
function Breadcrumbs(props: BreadcrumbsProps): JSX.Element;

// Menu components
function Menu(props: MenuProps): JSX.Element;
function MenuItem(props: MenuItemProps): JSX.Element;
function ContextMenu(props: ContextMenuProps): JSX.Element;

// Tab components
function Tabs(props: TabsProps): JSX.Element;
function Tab(props: TabProps): JSX.Element;

Navigation Components

Data Display

Components for displaying and interacting with data including tables, trees, tags, progress indicators, and non-ideal states.

// Data structure components
function Tree(props: TreeProps): JSX.Element;
function HTMLTable(props: HTMLTableProps): JSX.Element;

// Status and feedback
function ProgressBar(props: ProgressBarProps): JSX.Element;
function Spinner(props: SpinnerProps): JSX.Element;
function NonIdealState(props: NonIdealStateProps): JSX.Element;

// Tag components
function Tag(props: TagProps): JSX.Element;
function TagInput(props: TagInputProps): JSX.Element;

Data Display

Interactive Components

Advanced interactive components including sliders, editable text, resizable elements, and specialized controls.

// Slider components
function Slider(props: SliderProps): JSX.Element;
function RangeSlider(props: RangeSliderProps): JSX.Element;
function MultiSlider(props: MultiSliderProps): JSX.Element;

// Interactive text
function EditableText(props: EditableTextProps): JSX.Element;

// Utility components
function ResizeSensor(props: ResizeSensorProps): JSX.Element;
function OverflowList(props: OverflowListProps): JSX.Element;

Interactive Components

Styling System

Comprehensive styling utilities including CSS classes, design tokens, and utility functions for consistent theming.

// CSS Classes namespace
namespace Classes {
  // Modifier classes
  const ACTIVE: string;
  const DISABLED: string;
  const LARGE: string;
  const SMALL: string;
  
  // Component classes
  const BUTTON: string;
  const CARD: string;
  const DIALOG: string;
}

// Utility functions
function intentClass(intent: Intent): string | undefined;
function elevationClass(elevation: Elevation): string | undefined;

Styling System

Context and Hooks

React Context providers and custom hooks for managing application state, keyboard shortcuts, and overlay behavior.

// Context providers
function BlueprintProvider(props: BlueprintProviderProps): JSX.Element;
function HotkeysProvider(props: HotkeysProviderProps): JSX.Element;

// Custom hooks
function useHotkeys(keys: string, callback: () => void, options?: UseHotkeysOptions): UseHotkeysReturnValue;
function usePrevious<T>(value: T): T | undefined;

Context and Hooks

Common Types

// Core enums
enum Intent {
  NONE = "none",
  PRIMARY = "primary", 
  SUCCESS = "success",
  WARNING = "warning",
  DANGER = "danger"
}

enum Size {
  SMALL = "small",
  MEDIUM = "medium", 
  LARGE = "large"
}

enum Elevation {
  ZERO = 0,
  ONE = 1,
  TWO = 2,
  THREE = 3,
  FOUR = 4
}

enum Position {
  TOP = "top",
  TOP_LEFT = "top-left",
  TOP_RIGHT = "top-right",
  BOTTOM = "bottom",
  BOTTOM_LEFT = "bottom-left",
  BOTTOM_RIGHT = "bottom-right",
  LEFT = "left",
  LEFT_TOP = "left-top",
  LEFT_BOTTOM = "left-bottom",
  RIGHT = "right",
  RIGHT_TOP = "right-top",
  RIGHT_BOTTOM = "right-bottom"
}

// Common prop interfaces
interface IntentProps {
  intent?: Intent;
}

interface Props {
  className?: string;
  id?: string;
}

type MaybeElement = JSX.Element | false | null | undefined;