
Research
NPM targeted by malware campaign mimicking familiar library names
Socket uncovered npm malware campaign mimicking popular Node.js libraries and packages from other ecosystems; packages steal data and execute remote code.
igniteui-webcomponents
Advanced tools
Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.
Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach. All components are based on the Indigo.Design Design System and are backed by ready-to-use UI kits for Sketch, Adobe XD and Figma.
See the Storybook Here
![]() | ![]() | ![]() | ![]() | ![]() |
---|---|---|---|---|
Latest ✔️ | Latest ✔️ | Latest ✔️ | Latest ✔️ | Latest ✔️ |
Components | Status | Documentation | Released Version |
---|---|---|---|
Tile Manager | ✅ | Docs | 5.3.0 |
Carousel | ✅ | Docs | 5.1.0 |
Date picker | ✅ | Docs | 4.10.0 |
Divider | ✅ | Docs | 4.10.0 |
Banner | ✅ | Docs | 4.10.0 |
Button group | ✅ | Docs | 4.5.0 |
Textarea | ✅ | Docs | 4.5.0 |
Combo | ✅ | Docs | 4.1.0 |
Stepper | ✅ | Docs | 4.1.0 |
Select | ✅ | Docs | 3.4.0 |
Dialog | ✅ | Docs | 3.4.0 |
Date Time Input | ✅ | Docs | 3.3.0 |
Tabs | ✅ | Docs | 3.3.0 |
Accordion | ✅ | Docs | 3.3.0 |
Mask Input | ✅ | Docs | 3.2.0 |
Expansion Panel | ✅ | Docs | 3.2.0 |
Tree | ✅ | Docs | 3.2.0 |
Drop Down | ✅ | Docs | 2.2.0 |
Linear Progress | ✅ | Docs | 2.1.0 |
Circular Progress | ✅ | Docs | 2.1.0 |
Chip | ✅ | Docs | 2.1.0 |
Snackbar | ✅ | Docs | 2.1.0 |
Toast | ✅ | Docs | 2.1.0 |
Rating | ✅ | Docs | 2.1.0 |
Slider | ✅ | Docs | 2.0.0 |
Range Slider | ✅ | Docs | 2.0.0 |
Avatar | ✅ | Docs | 1.0.0 |
Badge | ✅ | Docs | 1.0.0 |
Button | ✅ | Docs | 1.0.0 |
Calendar | ✅ | Docs | 1.0.0 |
Card | ✅ | Docs | 1.0.0 |
Checkbox | ✅ | Docs | 1.0.0 |
Form | ✅ | Docs | 1.0.0 |
Icon | ✅ | Docs | 1.0.0 |
Icon Button | ✅ | Docs | 1.0.0 |
Input | ✅ | Docs | 1.0.0 |
List | ✅ | Docs | 1.0.0 |
Navigation Bar (Navbar) | ✅ | Docs | 1.0.0 |
Navigation Drawer | ✅ | Docs | 1.0.0 |
Radio | ✅ | Docs | 1.0.0 |
Radio Group | ✅ | Docs | 1.0.0 |
Ripple | ✅ | Docs | 1.0.0 |
Switch | ✅ | Docs | 1.0.0 |
Components | Status | Documentation |
---|---|---|
Pivot Grid | ✅ | Docs |
Data Grid | ✅ | Docs |
Tree Grid | ✅ | Docs |
Hierarchical Grid | ✅ | Docs |
The Ignite UI for Web Components Data Grid and Table are both lightweight and developed to handle high data volumes. The Web Components Grid offers powerful data visualization capabilities and superior performance on any device. With interactive features that users expect. Fast rendering. Unbeatable interactions. And the best possible user experience that you wouldn’t otherwise be able to achieve with so little code on your own.
Provide a complete windowing experience, splitting complex layouts into smaller, easier-to-manage panes.
In order to use the Ignite UI Web Components in your application you should install the igniteui-webcomponents
package:
npm install igniteui-webcomponents
Next you will need to import the components that you want to use. You could import one or more components using the defineComponents
function like this:
import {
defineComponents,
IgcAvatarComponent,
IgcBadgeComponent,
} from 'igniteui-webcomponents';
defineComponents(IgcAvatarComponent, IgcBadgeComponent);
You could also import all of the components using the defineAllComponents
function:
import { defineAllComponents } from 'igniteui-webcomponents';
defineAllComponents();
Please note that importing all of the components will increase the bundle size of your application. That's why we recommend you to import only the components that you are actually using.
After the components are imported you could use them in your html:
<igc-avatar initials="AZ"></igc-avatar><igc-badge></igc-badge>
The package comes with its own Custom Elements Manifest, VSCode Custom Data Format for VSCode and Web Types for JetBrains IDEs. Refer to the documentation of your editor of choice to see if you can take advantage of 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 |
Follow the Contribution Guidelines to setup a development environment.
To scan the project for linting errors, run:
npm run lint
To automatically fix most linting and formatting errors, run:
npm run format
Linting and formatting are also set to run in a pre-commit hook in the project.
To run the suite of Web Test Runner tests, run:
npm run test
To run the tests in watch mode, run:
npm run test:watch
To start a local instance of Storybook for your component, run:
npm run storybook
To build a production version of Storybook, run:
npm run storybook:build
[6.0.0] - 2025-04-29
titlePosition
now defaults to auto
, instead of being undefined, which has the same behavior.CheckboxChangeEventArgs
removed, use IgcCheckboxChangeEventArgs
instead.RadioChangeEventArgs
removed, use IgcRadioChangeEventArgs
instead.IgcRangeSliderValue
removed, use IgcRangeSliderValueEventArgs
instead.IgcActiveStepChangingArgs
removed, use IgcActiveStepChangingEventArgs
instead.IgcActiveStepChangedArgs
removed, use IgcActiveStepChangedEventArgs
instead.igc-tab
panel property is removed.
igc-tab-panel
component is removed.
The igc-tab
now encompasses both the tab header and the tab content in a single component.
Slotted content in the default slot of the igc-tab
element now replaces the igc-tab-panel
role
while elements slotted inside the label slot will end up as content for the igc-tab
header.
Before:
<igc-tabs>
<igc-tab panel="home">
<igc-icon name="home"></igc-icon>
</igc-tab>
<igc-tab panel="search">
<igc-icon name="search"></igc-icon>
</igc-tab>
<igc-tab panel="favorite">
<igc-icon name="favorite"></igc-icon>
</igc-tab>
<igc-tab-panel id="home">Home tab panel</igc-tab-panel>
<igc-tab-panel id="search">Search tab panel</igc-tab-panel>
<igc-tab-panel id="favorite">Favorite tab panel</igc-tab-panel>
</igc-tabs>
After:
<igc-tabs>
<igc-tab>
<igc-icon name="home" slot="label"></igc-icon>
Home tab panel
</igc-tab>
<igc-tab>
<igc-icon name="search" slot="label"></igc-icon>
Search tab panel
</igc-tab>
<igc-tab>
<igc-icon name="favorite" slot="label"></igc-icon>
Favorite tab panel
</igc-tab>
</igc-tabs>
FAQs
Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.
The npm package igniteui-webcomponents receives a total of 2,663 weekly downloads. As such, igniteui-webcomponents popularity was classified as popular.
We found that igniteui-webcomponents demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Socket uncovered npm malware campaign mimicking popular Node.js libraries and packages from other ecosystems; packages steal data and execute remote code.
Research
Socket's research uncovers three dangerous Go modules that contain obfuscated disk-wiping malware, threatening complete data loss.
Research
Socket uncovers malicious packages on PyPI using Gmail's SMTP protocol for command and control (C2) to exfiltrate data and execute commands.