Ignite UI for Web Components - from Infragistics

Ignite UI for Web Components is a library that includes the Data Grid, the Hierarchical Grid, the Pivot Grid, more than 60 data Charts, the Dock Manager and other components. It also includes maps, gauges and other reusable components that help you create web applications.

Documentation · Storybook · Changelog · Discord

Table of contents

• Table of contents
• Components
  • Grids, Grid Lite and Dock Manager
    • The Lightweight Web Components Data Grid and Data Table
    • Dock Manager - EXCLUSIVE FEATURE
• Quick start
• Bundling a single theme
• Browser support
• Tooling
  • Editor metadata
  • AI agent skills
• Accessibility
• Security and supply chain
• Privacy
• Contributing
• Support
• License

Components

All components in this package are released under the MIT License. The table lists the release in which each component first shipped.

Component list

Components	Status	Documentation	Released Version	License
Virtual Scroll	✅	Docs	7.3.0	MIT
QR Code	✅	Docs	7.3.0	MIT
Color Picker	✅	Docs	7.3.0	MIT
Splitter	✅	Docs	7.1.0	MIT
Chat	✅	Docs	6.3.0	MIT
Date Range Picker	✅	Docs	6.1.0	MIT
Tooltip	✅	Docs	5.4.0	MIT
File Input	✅	Docs	5.4.0	MIT
Tile Manager	✅	Docs	5.3.0	MIT
Carousel	✅	Docs	5.1.0	MIT
Date picker	✅	Docs	4.10.0	MIT
Divider	✅	Docs	4.10.0	MIT
Banner	✅	Docs	4.10.0	MIT
Button group	✅	Docs	4.5.0	MIT
Textarea	✅	Docs	4.5.0	MIT
Combo	✅	Docs	4.1.0	MIT
Stepper	✅	Docs	4.1.0	MIT
Select	✅	Docs	3.4.0	MIT
Dialog	✅	Docs	3.4.0	MIT
Date Time Input	✅	Docs	3.3.0	MIT
Tabs	✅	Docs	3.3.0	MIT
Accordion	✅	Docs	3.3.0	MIT
Mask Input	✅	Docs	3.2.0	MIT
Expansion Panel	✅	Docs	3.2.0	MIT
Tree	✅	Docs	3.2.0	MIT
Drop Down	✅	Docs	2.2.0	MIT
Linear Progress	✅	Docs	2.1.0	MIT
Circular Progress	✅	Docs	2.1.0	MIT
Chip	✅	Docs	2.1.0	MIT
Snackbar	✅	Docs	2.1.0	MIT
Toast	✅	Docs	2.1.0	MIT
Rating	✅	Docs	2.1.0	MIT
Slider	✅	Docs	2.0.0	MIT
Range Slider	✅	Docs	2.0.0	MIT
Avatar	✅	Docs	1.0.0	MIT
Badge	✅	Docs	1.0.0	MIT
Button	✅	Docs	1.0.0	MIT
Calendar	✅	Docs	1.0.0	MIT
Card	✅	Docs	1.0.0	MIT
Checkbox	✅	Docs	1.0.0	MIT
Icon	✅	Docs	1.0.0	MIT
Icon Button	✅	Docs	1.0.0	MIT
Input	✅	Docs	1.0.0	MIT
List	✅	Docs	1.0.0	MIT
Navigation Bar (Navbar)	✅	Docs	1.0.0	MIT
Navigation Drawer	✅	Docs	1.0.0	MIT
Radio	✅	Docs	1.0.0	MIT
Radio Group	✅	Docs	1.0.0	MIT
Ripple	✅	Docs	1.0.0	MIT
Switch	✅	Docs	1.0.0	MIT

Grids, Grid Lite and Dock Manager

The grids and the Dock Manager ship in separate packages. Grid Lite is MIT licensed. The other packages are commercial products.

Components	Status	Documentation	License	Package
Pivot Grid	✅	Docs	Commercial	Ignite UI Web Components Grids
Data Grid	✅	Docs	Commercial	Ignite UI Web Components Grids
Tree Grid	✅	Docs	Commercial	Ignite UI Web Components Grids
Hierarchical Grid	✅	Docs	Commercial	Ignite UI Web Components Grids
Grid Lite	✅	Docs	MIT	Ignite UI Web Components Grid Lite

The Lightweight Web Components Data Grid and Data Table

The Ignite UI for Web Components Data Grid and Table are lightweight and can process large volumes of data. The Web Components Grid gives data visualization capabilities and fast rendering on all devices. It also has the interactive features that users expect. You need only a small quantity of code to use them.

Dock Manager - EXCLUSIVE FEATURE

The Dock Manager gives a complete windowing experience. It splits complex layouts into smaller panes that are easier to manage.

• Documentation
• License - Commercial
• Package - igniteui-dockmanager

Quick start

Install the igniteui-webcomponents package:

npm install igniteui-webcomponents

Import and register the components you need with the defineComponents function:

import {
  defineComponents,
  IgcAvatarComponent,
  IgcBadgeComponent,
} from 'igniteui-webcomponents';

defineComponents(IgcAvatarComponent, IgcBadgeComponent);

You can also register every component at once with defineAllComponents:

import { defineAllComponents } from 'igniteui-webcomponents';

defineAllComponents();

Register only the components that you use. When you register all components, the bundle size of your application increases.

After you register the components, use them in your HTML:

<igc-avatar initials="AZ"></igc-avatar><igc-badge></igc-badge>

See the documentation for guides on each component, theming, and framework integration.

Bundling a single theme

Each component contains the styles of all four themes (Material, Bootstrap, Indigo and Fluent) and applies the active one. If your application uses only one theme, set the igc-theme-<name> condition in your bundler. The bundle then contains only the styles of that theme and is approximately 15–17% smaller after gzip.

Tool	Configuration
Vite	resolve: { conditions: ['igc-theme-bootstrap', ...defaultClientConditions] }, with defaultClientConditions imported from vite
webpack	resolve: { conditionNames: ['igc-theme-bootstrap', '...'] }
esbuild	conditions: ['igc-theme-bootstrap'], or --conditions=igc-theme-bootstrap on the command line
Rollup	nodeResolve({ exportConditions: ['igc-theme-bootstrap'] }) from @rollup/plugin-node-resolve
Node.js	node --conditions=igc-theme-bootstrap server.js, for server-side rendering. In Vite, set ssr.resolve.conditions with defaultServerConditions.

The condition names are igc-theme-material, igc-theme-bootstrap, igc-theme-indigo and igc-theme-fluent. Set only one of them.

• The light and dark variants of the theme stay in the bundle. Thus, you can still switch between them.
• If you call configureTheme() with a theme that is not in the bundle, the components show only their structural styles.
• Load the global theme style sheet as before, for example igniteui-webcomponents/themes/light/bootstrap.css.
• Without a condition, the bundle contains all four themes, as before.

Browser support

Latest ✔️	Latest ✔️	Latest ✔️	Latest ✔️	Latest ✔️

Tooling

Editor metadata

The package includes its own Custom Elements Manifest, VSCode Custom Data Format for VSCode and Web Types for JetBrains IDEs. Refer to the documentation of your editor to find if it can use this metadata for linting, intellisense and documentation.

Package path	Description
igniteui-webcomponents/custom-elements.json	Custom Elements Manifest
igniteui-webcomponents/web-types.json	Web Types for JetBrains based IDEs
igniteui-webcomponents/igniteui-webcomponents.css-data.json	VSCode CSS custom data
igniteui-webcomponents/igniteui-webcomponents.html-data.json	VSCode HTML custom data

AI agent skills

The package also includes reusable skills for GitHub Copilot and other compatible AI agents. They provide task-specific guidance and current best practices for:

• Choosing the right components
• Integrating with React, Angular, Vue, or vanilla JavaScript
• Customizing component themes
• Generating a view from an image or design
• Optimizing bundle size
• Migrating from Grid Lite to the premium Data Grid

After you install the package, copy the skills into your repository so that your agent can find them automatically:

# Unix/macOS
cp -r node_modules/igniteui-webcomponents/skills/* .github/skills/

# Windows PowerShell
Copy-Item -Recurse node_modules\igniteui-webcomponents\skills\* .github\skills\

See the AI agent skills guide for example prompts, supported workflows, and additional installation locations.

Accessibility

The components target WCAG 2.1 level AA and follow the ARIA Authoring Practices Guide patterns for their roles. Component specifications run axe-core audits against the light DOM and the shadow DOM. Manual checks with a keyboard and with screen readers such as NVDA also verify the components. The components render in Shadow DOM, so some ARIA relations cannot use IDREF attributes. Instead, the library uses ElementInternals and ARIA element reflection. It also adopts new platform capabilities when browsers ship them.

Read ACCESSIBILITY.md for the conformance target, the verification process, the platform constraints, and what the host application remains responsible for.

Security and supply chain

Security fixes are released for the latest major version. Critical fixes are also backported to the previous major version. Report vulnerabilities privately through GitHub private vulnerability reporting. Do not report them in a public issue.

Each GitHub release has supply-chain evidence attached. The evidence is the published tarball with its digests, a CycloneDX SBOM, and signed provenance and SBOM attestations. You can check the attestations with gh attestation verify.

GitHub's CodeQL default setup scans every push and pull request. The OpenSSF Scorecard runs weekly. Dependabot keeps dependencies and actions patched. Property-based (fuzz) tests with fast-check check the mask, date, color, QR code and layout parsers. They run on every push and pull request, and weekly with random seeds.

Read SECURITY.md for the support policy, the reporting process, the response targets and the verification steps. Read THREAT-MODEL.md for the trust boundaries and what the host application remains responsible for.

Privacy

The library collects no data. The components send no telemetry, set no cookies, write nothing to web storage, and load no remote code. PRIVACY.md lists the few browser capabilities that the components use. Examples are a fetch of an icon URL that the host application registers, and a clipboard write when the user clicks a copy control.

Contributing

Contributions are welcome. CONTRIBUTING.md tells how to prepare a development environment. It also gives the linting, testing and Storybook commands, and the accessibility, dependency and security requirements for a change. All contributors must follow the Code of Conduct.

Support

See SUPPORT.md for where to report bugs, ask questions, request components, report security or accessibility problems, and reach Infragistics support for the commercial products.

License

The igniteui-webcomponents package is released under the MIT License.

The Grids, Dock Manager and other packages marked Commercial above are licensed separately under the Infragistics commercial license.