{"owner":"palantir","repo":"blueprint","hasSkills":true,"totalSkillsCount":20,"totalTokensCount":10958,"categories":["root-instruction","plugin-manifest"],"hasMcp":false,"mcpConfig":null,"found":["AGENTS.md","llms.txt","packages/colors/README.md","packages/core/README.md","packages/core/src/design-tokens/README.md","packages/datetime/README.md","packages/datetime2/README.md","packages/docs-app/README.md","packages/docs-theme/README.md","packages/eslint-config/README.md","packages/eslint-plugin/README.md","packages/icons/README.md","packages/labs/README.md","packages/landing-app/README.md","packages/node-build-scripts/README.md","packages/select/README.md","packages/stylelint-plugin/README.md","packages/table/README.md","packages/tslint-config/README.md","packages/webpack-build-scripts/README.md"],"skills":{"AGENTS.md":"# Blueprint.js Agentic Development Guide\n\n## Build/Test Commands\n\n- **Build**: `pnpm compile` (all packages), `pnpm nx compile @blueprintjs/core` (single package)\n- **Test all**: `pnpm test`, `pnpm nx run-many -t test`\n- **Test single package**: `pnpm nx test:vitest:run @blueprintjs/core` or `cd packages/core && pnpm test:vitest:run`\n- **Distribute**: `pnpm dist`, `pnpm nx dist @blueprintjs/core` (single package)\n- **Lint**: `pnpm lint`, `pnpm lint-fix` (auto-fix), `pnpm nx lint @blueprintjs/core` (single package)\n- **Format**: `pnpm format`, `pnpm format-check`\n- **Pre-commit hook**: `pnpm exec lint-staged` (via `.husky/pre-commit`)\n- **Verify all**: `pnpm verify` (compile + dist + test + lint + format-check)\n\n## Architecture\n\n- **Monorepo** using pnpm workspaces + Nx task runner\n- **Package manager**: pnpm v10.29.3 (strict dependency resolution)\n- **Packages**: Core UI components in `packages/` - core, datetime, select, table, icons, colors\n- **Apps**: docs-app (blueprintjs.com), demo-app, table-dev-app for development\n- **Build tools**: node-build-scripts, webpack-build-scripts\n- **Testing**: Vitest (components), Jest (build scripts), Enzyme + Chai + Sinon\n - New tests should be written with React Testing Library (RTL)\n\n## Code Style\n\n- **Prettier**: 120 char width, 4-space tabs (2 for SCSS/YAML), trailing commas\n- **ESLint**: TypeScript-ESLint + custom @blueprintjs rules, no console.log\n- **Imports**: Use workspace: deps\n- **Types**: Strict TypeScript, React 18 peer deps\n- **Components**: Follow existing patterns in packages/core/src/components/\n- **Styling**: SCSS in src/, compiled to lib/css/\n","llms.txt":"# Blueprint\n\n> 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.\n\n## Overview\n- [Quick Start](https://blueprintjs.com/docs/#blueprint.quick-start): Installation instructions and quick start guide for using Blueprint in your project, as well as a breakdown of what packages exist.\n- [Getting Started](https://blueprintjs.com/docs/#blueprint/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.\n- [Reading the Docs](https://blueprintjs.com/docs/#blueprint/reading-the-docs): Guide to navigating and understanding the Blueprint documentation site.\n- [Principles](https://blueprintjs.com/docs/#blueprint/principles): Design principles and philosophy behind Blueprint's component library.\n\n## Core\n\n- [Accessibility](https://blueprintjs.com/docs/#core/accessibility): Guidelines and patterns for building accessible interfaces with Blueprint.\n- [Classes](https://blueprintjs.com/docs/#core/classes): CSS utility classes for common styling patterns and layout helpers.\n- [Colors](https://blueprintjs.com/docs/#core/colors): Design system color palette with qualitative, sequential, and diverging color schemes. Specific CSS usage of colors is detailed here.\n- [Typography](https://blueprintjs.com/docs/#core/typography): Typography styles including headings, running text, links, and preformatted text. In BP these are largely CSS patterns.\n- [Variables](https://blueprintjs.com/docs/#core/variables): Sass and CSS variables for customizing Blueprint's theme and appearance.\n\n## Components\n\n- [Breadcrumbs](https://blueprintjs.com/docs/#core/components/breadcrumbs): Navigation breadcrumb trail with overflow handling.\n- [Buttons](https://blueprintjs.com/docs/#core/components/buttons): Button component with intent-based styling, icons, and loading states.\n- [Button Group](https://blueprintjs.com/docs/#core/components/button-group): Arranges multiple buttons in a horizontal or vertical group.\n- [Callout](https://blueprintjs.com/docs/#core/components/callout): Informational callout box with optional icon and intent styling.\n- [Card](https://blueprintjs.com/docs/#core/components/card): Bounded container for content with optional elevation and interactivity.\n- [Card List](https://blueprintjs.com/docs/#core/components/card-list): Vertical list of interactive cards within a bounded container.\n- [Control Card](https://blueprintjs.com/docs/#core/components/control-card): Card component that wraps a form control like a checkbox, radio, or switch.\n- [Collapse](https://blueprintjs.com/docs/#core/components/collapse): Animated container that shows or hides its content with a smooth transition.\n- [Divider](https://blueprintjs.com/docs/#core/components/divider): Thin line separator between UI elements, works in both horizontal and vertical layouts.\n- [Editable Text](https://blueprintjs.com/docs/#core/components/editable-text): Inline text element that becomes an editable input on interaction.\n- [Entity Title](https://blueprintjs.com/docs/#core/components/entity-title): Title component for entities with optional icon, heading, subtitle, and tags.\n- [HTML Elements](https://blueprintjs.com/docs/#core/components/html): Styled wrapper for native HTML elements with Blueprint styling applied.\n- [HTML Table](https://blueprintjs.com/docs/#core/components/html-table): Styled HTML table element with Blueprint theming and compact/striped options.\n- [Hotkeys Target](https://blueprintjs.com/docs/#core/components/hotkeys-target): Component for binding keyboard shortcuts to elements.\n- [Icon](https://blueprintjs.com/docs/#core/components/icon): Renders Blueprint icons as SVGs with customizable size, color, and intent.\n- [Link](https://blueprintjs.com/docs/#core/components/link): Styled anchor element with optional icon and Blueprint theming.\n- [Menu](https://blueprintjs.com/docs/#core/components/menu): Vertical list of interactive menu items, often used inside popovers and dropdowns.\n- [Navbar](https://blueprintjs.com/docs/#core/components/navbar): Horizontal navigation bar with support for groups, headings, and dividers.\n- [Non-ideal State](https://blueprintjs.com/docs/#core/components/non-ideal-state): Placeholder component for empty states, errors, or loading scenarios.\n- [Overflow List](https://blueprintjs.com/docs/#core/components/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.\n- [Panel Stack](https://blueprintjs.com/docs/#core/components/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.\n- [Progress Bar](https://blueprintjs.com/docs/#core/components/progress-bar): Horizontal bar indicating determinate or indeterminate progress.\n- [Resize Sensor](https://blueprintjs.com/docs/#core/components/resize-sensor): Utility component that detects and reports element size changes.\n- [Section](https://blueprintjs.com/docs/#core/components/section): Collapsible section container with a title bar and optional right element.\n- [Skeleton](https://blueprintjs.com/docs/#core/components/skeleton): Placeholder loading animation applied to text and block elements.\n- [Spinner](https://blueprintjs.com/docs/#core/components/spinner): Circular loading spinner with configurable size and intent.\n- [Tabs](https://blueprintjs.com/docs/#core/components/tabs): Tabbed interface component for switching between views.\n- [Tag](https://blueprintjs.com/docs/#core/components/tag): Small label component with intent styling, icons, and optional remove button.\n- [Compound Tag](https://blueprintjs.com/docs/#core/components/compound-tag): Tag with a left label and a right value section for key-value display.\n- [Text](https://blueprintjs.com/docs/#core/components/text): Text component that handles overflow with ellipsis and optional title attribute.\n- [Tree](https://blueprintjs.com/docs/#core/components/tree): Hierarchical tree view with expandable/collapsible nodes.\n\n## Form Controls\n\n- [Form Group](https://blueprintjs.com/docs/#core/components/form-group): Groups a label, helper text, and a form control together.\n- [Control Group](https://blueprintjs.com/docs/#core/components/control-group): Renders multiple form controls as a single connected group.\n- [Label](https://blueprintjs.com/docs/#core/components/label): Form label element with optional helper text.\n- [Checkbox](https://blueprintjs.com/docs/#core/components/checkbox): Checkbox control with label, indeterminate state support, and alignment options.\n- [Radio](https://blueprintjs.com/docs/#core/components/radio): Radio button component and radio group for selecting one option from a set.\n- [HTML Select](https://blueprintjs.com/docs/#core/components/html-select): Styled wrapper around the native HTML select element.\n- [Segmented Control](https://blueprintjs.com/docs/#core/components/segmented-control): Linear set of two or more segments acting as mutually exclusive buttons.\n- [Slider](https://blueprintjs.com/docs/#core/components/sliders): Slider and range slider components for selecting numeric values.\n- [Switch](https://blueprintjs.com/docs/#core/components/switch): Toggle switch for boolean on/off states.\n\n## Form Inputs\n\n- [Input Group](https://blueprintjs.com/docs/#core/components/input-group): Text input with optional left icon and right element.\n- [Text Area](https://blueprintjs.com/docs/#core/components/text-area): Multi-line text input with auto-resizing support.\n- [File Input](https://blueprintjs.com/docs/#core/components/file-input): Styled file upload input with customizable button text.\n- [Numeric Input](https://blueprintjs.com/docs/#core/components/numeric-input): Input for numeric values with increment/decrement buttons and configurable bounds.\n- [Tag Input](https://blueprintjs.com/docs/#core/components/tag-input): Input that manages a list of tag values with add and remove functionality.\n\n## Overlays\n\n- [Overlay](https://blueprintjs.com/docs/#core/components/overlay): [DEPRECATED, use Overlay2] Generic overlay wrapper that renders content above the page with a backdrop.\n- [Overlay2](https://blueprintjs.com/docs/#core/components/overlay2): Next-generation overlay component with improved focus management and lifecycle.\n- [Portal](https://blueprintjs.com/docs/#core/components/portal): Renders children into a DOM node outside the parent component hierarchy.\n- [Alert](https://blueprintjs.com/docs/#core/components/alert): Modal alert dialog for confirming user actions with configurable intent buttons.\n- [Context Menu](https://blueprintjs.com/docs/#core/components/context-menu): Right-click context menu triggered on an element.\n- [Context Menu Popover](https://blueprintjs.com/docs/#core/components/context-menu-popover): Popover-based context menu with configurable positioning.\n- [Dialog](https://blueprintjs.com/docs/#core/components/dialog): Modal dialog with header, body, and footer sections.\n- [Drawer](https://blueprintjs.com/docs/#core/components/drawer): Panel that slides in from the edge of the screen.\n- [Popover](https://blueprintjs.com/docs/#core/components/popover): [DEPRECATED, use PopoverNext] Floating container that appears next to a target element, used for tooltips, menus, and forms.\n- [Popover Next](https://blueprintjs.com/docs/#core/components/popover-next): Next-generation Popover built on Floating UI with improved positioning and performance.\n- [Toast](https://blueprintjs.com/docs/#core/components/toast): Ephemeral notification message that appears and auto-dismisses.\n- [Tooltip](https://blueprintjs.com/docs/#core/components/tooltip): Lightweight popover for showing additional information on hover or focus.\n\n## Context Providers\n\n- [Blueprint Provider](https://blueprintjs.com/docs/#core/context/blueprint-provider): Top-level provider that configures global Blueprint settings.\n- [Hotkeys Provider](https://blueprintjs.com/docs/#core/context/hotkeys-provider): Provider for the hotkeys system that enables keyboard shortcut registration.\n- [Overlays Provider](https://blueprintjs.com/docs/#core/context/overlays-provider): Provider that manages the overlay stack for proper focus and z-index handling.\n- [Portal Provider](https://blueprintjs.com/docs/#core/context/portal-provider): Provider that configures the container element for all portaled content.\n\n## Hooks\n\n- [useHotkeys](https://blueprintjs.com/docs/#core/hooks/use-hotkeys): Hook for registering keyboard shortcuts with automatic binding and cleanup.\n- [useOverlayStack](https://blueprintjs.com/docs/#core/hooks/use-overlay-stack): Hook for interacting with the overlay stack to manage overlay lifecycle.\n\n## DateTime\n\n- [Date Picker](https://blueprintjs.com/docs/#datetime/date-picker): Calendar-based component for selecting a single date.\n- [Date Input](https://blueprintjs.com/docs/#datetime/date-input): Text input that parses and formats dates with an optional calendar popover.\n- [Date Range Picker](https://blueprintjs.com/docs/#datetime/date-range-picker): Two-calendar component for selecting a date range with shortcut presets.\n- [Date Range Input](https://blueprintjs.com/docs/#datetime/date-range-input): Dual text inputs for entering a date range with calendar popover.\n- [Time Picker](https://blueprintjs.com/docs/#datetime/timepicker): Input for selecting a time of day with hour, minute, second, and millisecond precision.\n- [Timezone Select](https://blueprintjs.com/docs/#datetime/timezone-select): Dropdown for selecting a timezone from the IANA timezone database.\n\n## Icons\n\n- [Loading Icons](https://blueprintjs.com/docs/#icons/loading-icons): Guide to loading and bundling Blueprint icons efficiently with tree-shaking.\n- [Icons List](https://blueprintjs.com/docs/#icons/icons-list): Searchable catalog of all 500+ Blueprint icons.\n\n## Select\n\n- [Select](https://blueprintjs.com/docs/#select/select-component): Single-item selector with built-in filtering and keyboard navigation.\n- [Suggest](https://blueprintjs.com/docs/#select/suggest): Text input with autocomplete suggestions from a filterable list.\n- [Multi Select](https://blueprintjs.com/docs/#select/multi-select): Multi-item selector that renders selected items as tags.\n- [Omnibar](https://blueprintjs.com/docs/#select/omnibar): Full-screen overlay search input for searching across all items.\n- [Query List](https://blueprintjs.com/docs/#select/query-list): Headless component that manages item filtering and keyboard interaction for list selection.\n\n## Table\n\n- [Features](https://blueprintjs.com/docs/#table/features): Overview of table features including sorting, filtering, selection, and resizing.\n- [API](https://blueprintjs.com/docs/#table/api): Complete API reference for table components including Table, Column, Cell, and related types.\n\n## Labs\n\n- [Box](https://blueprintjs.com/docs/#labs/box): Polymorphic layout primitive for building flexible UI compositions.\n- [Flex](https://blueprintjs.com/docs/#labs/flex): Flexbox layout component with typed props for alignment, direction, and spacing.\n","packages/colors/README.md":"\n\n# [Blueprint](http://blueprintjs.com/) Colors\n\nBlueprint is a React UI toolkit for the web.\n\nThis package contains color variables for Blueprint's color palette.\n\nThere are currently two color palettes available: modern 4.x colors and \"legacy\" 3.x colors.\n\n## Installation\n\n```sh copy\nnpm install --save @blueprintjs/colors\n```\n\n### [Full Documentation](http://blueprintjs.com/docs) | [Source Code](https://github.com/palantir/blueprint)\n","packages/core/README.md":"\n\n# [Blueprint](http://blueprintjs.com/) Core Components\n\nBlueprint is a React UI toolkit for the web.\n\nThis package contains the core set of UI components as CSS and React code.\n\n## Installation\n\n```sh copy\nnpm install --save @blueprintjs/core\n```\n\n### [Full Documentation](http://blueprintjs.com/docs) | [Source Code](https://github.com/palantir/blueprint)\n","packages/core/src/design-tokens/README.md":"# Design Tokens -- EXPERIMENTAL\n\nBlueprint design tokens generated with [Style Dictionary](https://styledictionary.com/).\n\n## Configuration\n\nTokens are available as CSS custom properties on `:root`:\n\n```css\n.element {\n color: var(--bp-typography-color-default-rest);\n background: var(--bp-surface-background-color-default-rest);\n border-radius: var(--bp-surface-border-radius);\n padding: calc(var(--bp-surface-spacing) * 2);\n}\n```\n\n## Token Categories\n\n| Category | Prefix | Description |\n| ----------- | -------------------- | --------------------------------------------------- |\n| Palette | `--bp-palette-*` | Raw color values (gray, blue, green, etc.) |\n| Intent | `--bp-intent-*` | Semantic colors (primary, success, warning, danger) |\n| Surface | `--bp-surface-*` | Backgrounds, borders, shadows, spacing, z-index |\n| Typography | `--bp-typography-*` | Font families, sizes, weights, line heights, colors |\n| Iconography | `--bp-iconography-*` | Icon sizes and colors |\n| Emphasis | `--bp-emphasis-*` | Focus rings, transitions, easing |\n\n## Development\n\n```bash\npnpm run build:tokens # Generate tokens\n```\n\n## Additional Notes\n\n### Token Structure\n\nTokens follow the [DTCG](https://tr.designtokens.org/format/) specification. Source files live in `tokens/base/` (5 files: palette, intent, surface, typography, emphasis) with theme overrides in `tokens/themes/` (which currently includes only dark tokens).\n\nEach token uses these standard DTCG properties:\n\n| Property | Purpose |\n| -------------- | ---------------------------------------------------------------------------------------------------------- |\n| `$type` | Data type: `color`, `dimension`, `shadow`, `fontFamily`, `fontWeight`, `number`, `duration`, `cubicBezier` |\n| `$value` | The token value — a literal, a reference like `\"{palette.blue.3}\"`, or a complex object |\n| `$description` | Human-readable explanation |\n| `$extensions` | Custom Blueprint metadata |\n\n#### Custom extensions\n\n**`com.blueprint.derive`** — derives a new color from the referenced `$value` using OKLCH color space transforms:\n\n```json\n{\n \"$value\": \"{intent.default.rest}\",\n \"$extensions\": {\n \"com.blueprint.derive\": {\n \"alpha\": 0.25\n }\n }\n}\n```\n\nAvailable derivation properties: `alpha`, `lightnessScale`, `chromaScale`, `lightnessOffset`, `chromaOffset`, `hueOffset`. These are applied during build to produce both a static hex fallback and a relative color syntax expression (`oklch(from ...)`).\n\n**`com.blueprint.role`** — assigns special build handling to a token. Currently one role exists:\n\n- `\"stackable-layer\"` — wraps the compiled color in `linear-gradient(color 0 0)` so it can be composited as a `background-image` layer.\n\n#### Theme overrides\n\nDark mode files in `tokens/themes/dark/` override base tokens by redefining `$value` and/or `$extensions`. For example, `surface.border-color.strong` changes from gray-based in light mode to white-based in dark mode:\n\n```json\n// base/surface.tokens.json\n\"strong\": { \"$value\": \"{intent.default.rest}\", \"$extensions\": { \"com.blueprint.derive\": { \"alpha\": 0.25 } } }\n\n// themes/dark/surface.tokens.json\n\"strong\": { \"$value\": \"{palette.white}\", \"$extensions\": { \"com.blueprint.derive\": { \"alpha\": 0.3 } } }\n```\n\n### Browser Compatibility\n\nSome tokens use the CSS [relative color syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors) (`oklch(from ...)`) for deriving hover, active, and alpha-modified colors. This requires:\n\n| Browser | Minimum Version |\n| ------- | --------------- |\n| Chrome | 122+ |\n| Safari | 18+ |\n| Firefox | 128+ |\n| Edge | 122+ |\n\nOlder browsers will ignore these property values. Within Blueprint components, there will be fallback values provided. Outside of Blueprint, you may need to provide your own fallbacks.\n","packages/datetime/README.md":"\n\n# [Blueprint](http://blueprintjs.com/) Date & Time Components\n\nBlueprint is a React UI toolkit for the web.\n\nThis package contains a collection of React components for working with dates and times.\n\n[react-day-picker v8](https://daypicker.dev/v8) is a dependency of this package; we use it\nto render calendars.\n\n## Installation\n\n```sh copy\nnpm install --save @blueprintjs/datetime\n```\n\n### [Full Documentation](http://blueprintjs.com/docs) | [Source Code](https://github.com/palantir/blueprint)\n","packages/datetime2/README.md":"\n\n# [Blueprint](http://blueprintjs.com/) Date & Time Components (V2)\n\nBlueprint is a React UI toolkit for the web.\n\nThis package contains re-exports of components from `@blueprintjs/datetime`. The \"V3\" components previously existed in this package as of v5.x, but they were promoted to the standard \"V1\" components in `@blueprintjs/datetime` v6.x.\n\nThis package also contains legacy APIs which are re-exported aliases for components from @blueprintjs/datetime v5.x. These \"V2\" names are backwards-compatible with @blueprintjs/datetime2 v0.x.\n\nTo migrate to the latest \"V3\" components, follow the [react-day-picker v8 migration guide](https://github.com/palantir/blueprint/wiki/react-day-picker-8-migration).\n\n### [Full Documentation](http://blueprintjs.com/docs) | [Source Code](https://github.com/palantir/blueprint)\n","packages/docs-app/README.md":"# [Blueprint Documentation](http://blueprintjs.com/docs)\n\nThis project generates and aggregates the documentation from the packages\nin this repo.\n\n## Quick start\n\nFrom the root of the repo:\n\n1. Run `pnpm install`\n1. Run `pnpm dev`\n1. Open your browser to http://localhost:9001/\n\n_Note: if you want to run the development server on a different port, set the `PORT` environment variable._\n","packages/docs-theme/README.md":"\n\n# [Blueprint](http://blueprintjs.com/) Documentation Theme\n\nBlueprint is a React UI toolkit for the web.\n\nThis package provides a React-based documentation theme for\n[Documentalist](https://github.com/palantir/documentalist/), a tool for generating documentation\ndata from markdown files and documented source code.\n\n## Installation\n\n```sh copy\nnpm install --save @blueprintjs/docs-theme\n```\n\n### [Full Documentation](http://blueprintjs.com/docs) | [Source Code](https://github.com/palantir/blueprint)\n","packages/eslint-config/README.md":"\n\n# [Blueprint](http://blueprintjs.com/) [ESLint](https://eslint.org/) Configuration\n\nBlueprint is a React UI toolkit for the web.\n\nThis package contains the [ESLint](https://eslint.org/) configuration for Blueprint. It enables lint rules which enforce code style conventions and enables the `@blueprintjs/eslint-plugin` plugin.\n\n## Installation\n\n```sh copy\npnpm add --save-dev @blueprintjs/eslint-config\n```\n\n## Usage\n\nEnable this configuration in your ESLint configuration file (e.g. `.eslintrc.json`):\n\n```json\n{\n \"extends\": [\"@blueprintjs/eslint-config\"]\n}\n```\n\n### VSCode\n\nIf you use VSCode, install the [dbaeumer.vscode-eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) plugin to lint your code in the editor. We recommend enabling these global VSCode settings:\n\n```json\n\"editor.formatOnSave\": true,\n\"eslint.format.enable\": true\n```\n","packages/eslint-plugin/README.md":"\n\n# [Blueprint](http://blueprintjs.com/) [ESLint](https://eslint.org/) plugin\n\nBlueprint is a React UI toolkit for the web.\n\nThis package contains the [ESLint](https://eslint.org/) plugin for Blueprint. It provides custom rules which are useful when developing against Blueprint libraries.\n\n**Key features:**\n\n- [Blueprint-specific rules](#Rules) for use with `@blueprintjs` components.\n\n## Installation\n\n```sh copy\npnpm add --save-dev @blueprintjs/eslint-plugin\n```\n\n## Usage\n\nAdd the `\"@blueprintjs\"` plugin to your ESLint config:\n\n```json\n{\n \"plugins\": [\"@blueprintjs\"]\n}\n```\n\n### Configure all built-in rules\n\nTo enable _all_ rules provided by the plugin the Blueprint-specific rules, extend the `plugin:@blueprintjs/recommended` configuration:\n\n```json\n{\n \"extends\": [\"plugin:@blueprintjs/recommended\"]\n}\n```\n\n### Configure specific rules\n\nAlternatively, you may enable specific rules provided the plugin:\n\n```json\n{\n \"rules\": {\n \"@blueprintjs/classes-constants\"\n \"@blueprintjs/no-deprecated-components\": \"error\"\n }\n}\n```\n\n## Rules\n\n### `@blueprintjs/classes-constants`\n\nEnforce usage of class names exported as public API via the `Classes` object instead of string literals like `\"bp6-dark\"`.\n\nEach `@blueprintjs` package exports a `Classes` object which contains constants for every CSS class defined by the package.\n\n**Rationale**: This is useful to avoid typos in styling or creating Blueprint components, and also helps future-proof your code for major\nversion bumps of Blueprint where the class namespace (e.g. `bp6-`) changes.\n\n```json\n{\n \"rules\": {\n \"@blueprintjs/classes-constants\": \"error\"\n }\n}\n```\n\n**Has auto-fixer**: ✅\n\n```diff\n- const element =
;\n+ const element =
;\n```\n\n### `@blueprintjs/html-components`\n\nEnforce usage of Blueprint components over regular HTML JSX tags:\n\n- h1-6 -> H1-6\n- code -> Code\n- pre -> Pre\n- blockquote -> Blockquote\n- table -> HTMLTable\n\n**Rationale**: This is uesful to ensure consistent styling of common typographic elements and other basic markup.\n\n**Has auto-fixer**: ✅\n\n```json\n{\n \"rules\": {\n \"@blueprintjs/html-components\": [\"error\"]\n }\n}\n```\n\n### `@blueprintjs/icon-components`\n\n:warning: DEPRECATED: this rule is no longer recommended. Icons modularity / tree shaking is a first-class feature of Blueprint v5.x.\n\nEnforce usage of JSX `Icon` components instead of `IconName` string literals (or vice-versa) in `icon` JSX props.\nNote that this rule only supports hardcoded values in the `icon` prop; it does not handle expressions or conditionals.\n\nA fixer is available for this rule that will convert between string literals and named `Icon` components. Note that the implementation is naive and may require intervention, such as to import a component or fix an invalid name.\n\nNamed icon components (`Tick`, `Graph`, etc) can be imported from the `@blueprintjs/icons` package.\n\nThis rule is disabled in the `blueprint-rules` config as it is most useful to ensure that the `@blueprintjs/icons` package can be tree-shaken (an opt-in process which requires using components and _never_ `IconName` literals).\n\n```js\n{\n \"rules\": {\n // default uses \"component\"\n \"@blueprintjs/icon-components\"\n // expanded syntax\n \"@blueprintjs/icon-components\": [\"error\", \"component\" | \"literal\"] // choose one\n }\n}\n```\n\n`\"component\"`\n\n```diff\n-