Polarity Integration Component Library

All Components

Meta-package that re-exports every component in the Polarity Integration Component Library. Install this single package to get access to all components, utilities, and types.

Installation

npm install @polarityio/pi-components

Peer Dependencies

• lit ^3.0.0

Usage

import {
  defineCustomElementOnce,
  PiButton,
  PiButtonName,
  PiIcon,
  PiIconName,
  PiSelect,
  PiSelectName
} from '@polarityio/pi-components';

// Register only the components you need
defineCustomElementOnce(PiButtonName, PiButton);
defineCustomElementOnce(PiIconName, PiIcon);
defineCustomElementOnce(PiSelectName, PiSelect);

import { html } from 'lit';
import { faUser } from '@fortawesome/free-solid-svg-icons';

html`
  <pi-button type="primary" label="Click me"></pi-button>
  <pi-icon .icon=${faUser} size="lg"></pi-icon>
`;

Tree-shaking: Only the components you import are included in your bundle. Unused components are automatically excluded.

Included Components

| Package | Component(s) | Description | | --------------------------------------------------- | ---------------------------------------------- | ------------------------------------------------------------- | | @polarityio/pi-shared | — | Shared utilities, base classes, interfaces, and design tokens | | @polarityio/pi-button | <pi-button> | Button with multiple types, variants, and icon support | | @polarityio/pi-card | <pi-card> | Card container with optional collapsible title | | @polarityio/pi-checkbox | <pi-checkbox> | Checkbox with checked, indeterminate, and disabled states | | @polarityio/pi-copy-button | <pi-copy-button> | Clipboard copy button with rich text support | | @polarityio/pi-error | <pi-error> | Error alert with detail expansion and clipboard copy | | @polarityio/pi-external-link | <pi-external-link> | Link that opens URLs in a new tab with icon and tooltip | | @polarityio/pi-icon | <pi-icon> | FontAwesome SVG icon rendering | | @polarityio/pi-input | <pi-input> | Text input with validation, clearable field, and error states | | @polarityio/pi-key-value | <pi-key-value> | Key-value pair display with date formatting | | @polarityio/pi-object-table | <pi-object-table> | Object/array to HTML table renderer | | @polarityio/pi-radio | <pi-radio>, <pi-radio-group> | Radio button and radio group components | | @polarityio/pi-section-header | <pi-section-header> | Collapsible section header with count display | | @polarityio/pi-select | <pi-select> | Searchable dropdown with single/multiple selection | | @polarityio/pi-show-more | <pi-show-more> | Expandable content with show more/less toggle | | @polarityio/pi-spinner | <pi-spinner> | Loading spinner with configurable size and label | | @polarityio/pi-summary-tag | <pi-summary-tag> | Integration-themed badge with colored acronym | | @polarityio/pi-tab | <pi-tab>, <pi-tab-group>, <pi-tab-panel> | Tab navigation components | | @polarityio/pi-tag | <pi-tag> | Inline tag/chip with optional icons | | @polarityio/pi-tooltip | <pi-tooltip> | Tooltip with floating-ui positioning |

Component Registry

This package also exports a component registry JSON file for runtime discovery:

import registry from '@polarityio/pi-components/component-registry.json';

When to Use This Package

• Use @polarityio/pi-components when you need multiple components and want a single import source. Tree-shaking ensures only what you use is bundled.
• Use individual packages (e.g., @polarityio/pi-button) when you want minimal dependencies or need fine-grained version control per component.

Theming

All components use CSS custom properties from @polarityio/pi-shared for theming. See the Shared Utilities README for details on design tokens and theme setup.

License

MIT