### Install igniteui-react Package Source: https://github.com/igniteui/igniteui-webcomponents/blob/master/skills/igniteui-wc-integrate-with-framework/references/react.md Install the React wrapper package for Ignite UI Web Components using npm. ```bash npm install igniteui-react ``` -------------------------------- ### Start Local Storybook Instance Source: https://github.com/igniteui/igniteui-webcomponents/blob/master/README.md Run this command in your terminal to start a local instance of Storybook for component development and testing. ```sh npm run storybook ``` -------------------------------- ### Install Ignite UI Web Components Source: https://github.com/igniteui/igniteui-webcomponents/blob/master/README.md Install the igniteui-webcomponents package using npm. This is the first step to using the components in your application. ```sh npm install igniteui-webcomponents ``` -------------------------------- ### Basic Paginator Setup Source: https://github.com/igniteui/igniteui-webcomponents/wiki/Paginator-Specification---Draft This snippet shows how to initialize the igc-paginator component and set the number of items to display per page. ```html ``` -------------------------------- ### Basic Toast Example Source: https://github.com/igniteui/igniteui-webcomponents/wiki/Alert-Specification-DRAFT Demonstrates how to use the IgcToast component to display a persistent message. The 'keepOpen' property prevents the toast from auto-hiding. ```html Toast Message ``` -------------------------------- ### Configuring Orientation and Size Source: https://github.com/igniteui/igniteui-webcomponents/wiki/Splitter Configure the splitter to be vertical and set an initial size for the start pane. The end pane will fill the remaining space. ```html
Top pane (300px)
Bottom pane (fills remaining space)
 ``` -------------------------------- ### Admin Dashboard Shell Setup Source: https://github.com/igniteui/igniteui-webcomponents/blob/master/skills/igniteui-wc-choose-components/SKILL.md Imports and registers necessary components for an admin dashboard, including navigation, icons, and cards. Ensure these components are defined before use. ```typescript import { defineComponents, IgcNavbarComponent, IgcNavDrawerComponent, IgcCardComponent, IgcIconComponent, IgcButtonComponent, registerIconFromText, } from 'igniteui-webcomponents'; defineComponents( IgcNavbarComponent, IgcNavDrawerComponent, IgcCardComponent, IgcIconComponent, IgcButtonComponent ); registerIconFromText('menu', '', 'material'); registerIconFromText('home', '', 'material'); registerIconFromText('build', '', 'material'); ``` -------------------------------- ### Install Bundlesize for Bundle Size Monitoring Source: https://github.com/igniteui/igniteui-webcomponents/blob/master/skills/igniteui-wc-optimize-bundle-size/SKILL.md Install the bundlesize package as a dev dependency to monitor your application's bundle size. This tool can be used with any build tool. ```bash npm install --save-dev bundlesize ``` -------------------------------- ### Get Component Design Tokens Tool Source: https://github.com/igniteui/igniteui-webcomponents/blob/master/skills/igniteui-wc-customize-component-theme/SKILL.md Discover the available design tokens for a specific component, such as the 'grid', to understand its theming capabilities. ```bash Tool: get_component_design_tokens Params: { component: "grid" } ``` -------------------------------- ### Set Size Tool (CSS Output) Source: https://github.com/igniteui/igniteui-webcomponents/blob/master/skills/igniteui-wc-customize-component-theme/SKILL.md Set the size of components using the 'set_size' tool, defaulting to CSS output. The 'medium' size is used as an example. ```bash Tool: set_size → { size: "medium" } # CSS (default) ``` -------------------------------- ### Source Map Explorer Setup Source: https://github.com/igniteui/igniteui-webcomponents/blob/master/skills/igniteui-wc-optimize-bundle-size/SKILL.md Use `source-map-explorer` to analyze your JavaScript bundles. This tool helps visualize the size of different modules within your application's output. ```bash npm install --save-dev source-map-explorer ``` ```json { "scripts": { "analyze": "source-map-explorer 'dist/**/*.js'" } } ``` ```bash npm run build npm run analyze ``` -------------------------------- ### Default Date Range Picker Initialization Source: https://github.com/igniteui/igniteui-webcomponents/wiki/Date-Range-Picker Shows how to initialize the Date Range Picker component with basic labels for start and end inputs. ```html ``` -------------------------------- ### Build JSON Documentation Metadata Source: https://github.com/igniteui/igniteui-webcomponents/wiki/How-to-document-your-component Builds the JSON metadata for each documented component. This command runs automatically when starting the Storybook preview or building the package. ```shell npm run build:docs:json ``` -------------------------------- ### Set Spacing Tool (CSS Output) Source: https://github.com/igniteui/igniteui-webcomponents/blob/master/skills/igniteui-wc-customize-component-theme/SKILL.md Adjust the spacing for a specific component, like 'grid', using the 'set_spacing' tool. This example defaults to CSS output. ```bash Tool: set_spacing → { spacing: 0.75, component: "grid" } # CSS (default) ``` -------------------------------- ### Use Defined Components in HTML Source: https://github.com/igniteui/igniteui-webcomponents/blob/master/README.md After importing and defining the components, you can use them directly in your HTML markup. This example shows how to use the igc-avatar and igc-badge components. ```html ``` -------------------------------- ### Responsive Splitter Orientation Source: https://github.com/igniteui/igniteui-webcomponents/wiki/Splitter Adapt the splitter's orientation and pane sizes based on viewport width using JavaScript and `window.matchMedia`. This example switches to vertical orientation on screens smaller than 768px. ```typescript // Switch to vertical orientation on mobile const splitter = document.querySelector('igc-splitter'); const mediaQuery = window.matchMedia('(max-width: 768px)'); function handleViewportChange(e) { splitter.orientation = e.matches ? 'vertical' : 'horizontal'; if (e.matches) { // Adjust sizes for mobile splitter.startSize = '40%'; } } mediaQuery.addEventListener('change', handleViewportChange); handleViewportChange(mediaQuery); ``` -------------------------------- ### Indeterminate and Disabled Checkbox Example Source: https://github.com/igniteui/igniteui-webcomponents/wiki/Checkbox-Specification Demonstrates how to create an indeterminate and disabled checkbox with a label positioned before the control. This is useful for representing a state that is neither fully selected nor unselected, and is not interactive. ```html Indeterminate checkbox ``` -------------------------------- ### Define Custom Elements Source: https://github.com/igniteui/igniteui-webcomponents/blob/master/skills/igniteui-wc-generate-from-image-design/SKILL.md Register custom elements that are actually used in your application. This is typically done in an entry point or setup module, unless a framework integration handles it differently. Ensure only necessary components are registered to optimize performance. ```javascript defineComponents(...) ``` -------------------------------- ### Date Range Picker Interface Source: https://github.com/igniteui/igniteui-webcomponents/wiki/Date-Range-Picker Defines the structure for a date range value, including start and end dates. ```typescript interface DateRangeValue { start: Date | null; end: Date | null; } ``` -------------------------------- ### Define All Components Source: https://github.com/igniteui/igniteui-webcomponents/blob/master/README.md Import and define all available components using defineAllComponents. Be aware that this will increase your application's bundle size, so it's generally recommended to import only the components you need. ```ts import { defineAllComponents } from 'igniteui-webcomponents'; defineAllComponents(); ``` -------------------------------- ### Basic Tabs Structure Source: https://github.com/igniteui/igniteui-webcomponents/wiki/Tabs-Specification Defines a basic structure for tabs with labels and associated content. Includes a disabled tab example. ```html Content 1 Content 2 Content 3 ``` -------------------------------- ### Basic Banner Usage Source: https://github.com/igniteui/igniteui-webcomponents/wiki/Banner-specification Demonstrates the simplest way to implement the banner component with a message. ```html You are currently not logged in! Please, log into your account first. ``` -------------------------------- ### Import Theme and Register Specific Components Source: https://github.com/igniteui/igniteui-webcomponents/blob/master/skills/igniteui-wc-integrate-with-framework/references/vanilla-js.md In your main JavaScript/TypeScript entry file, import a theme and register the specific components you intend to use. This is the recommended approach for optimizing bundle size. ```typescript // 1. Import a theme (required for correct styling) import 'igniteui-webcomponents/themes/light/bootstrap.css'; // 2. Import and register specific components (recommended) import { defineComponents, IgcButtonComponent, IgcInputComponent } from 'igniteui-webcomponents'; defineComponents(IgcButtonComponent, IgcInputComponent); ``` -------------------------------- ### Render Nested Component in LitElement Source: https://github.com/igniteui/igniteui-webcomponents/wiki/Styling-and-Themes This TypeScript example shows a LitElement component rendering another component (`igc-test-component`) within its template. ```ts /// other-component.ts import { html, LitElement } from 'lit'; import { styles } from './other-component.base.css'; export default IgcOtherComponent extends LitElement { public static override styles = styles; protected override render() { return html`
`; } } ``` -------------------------------- ### Igc-List with Custom Empty Template Source: https://github.com/igniteui/igniteui-webcomponents/wiki/List-Specification Provides an example of a custom template to display when the Igc-List is empty, showing a simple paragraph element. ```html

My custom empty list template

 ``` -------------------------------- ### Create Component Theme Tool Source: https://github.com/igniteui/igniteui-webcomponents/blob/master/skills/igniteui-wc-customize-component-theme/SKILL.md Generate a theme for an individual component using palette token references for colors. Ensure all color values reference CSS custom properties like --ig-primary-500. ```bash Tool: create_component_theme Params: { platform: "webcomponents", designSystem: "material", variant: "light", component: "grid", tokens: { "header-background": "var(--ig-primary-50)", "header-text-color": "var(--ig-primary-800)" } } ``` -------------------------------- ### Icon Registration and Usage Source: https://github.com/igniteui/igniteui-webcomponents/wiki/Icon-Specification Demonstrates how to register icons using both URLs and SVG text, and how to define and use the `igc-icon` component in HTML. ```APIDOC ## Icon Registration and Usage ### Description This section covers the developer experience for registering icons and defining icon components. ### Registering Icons #### `registerIcon(name: string, url: string, collection?: string): Promise` Registers an icon by providing its name, a URL to its SVG source, and an optional collection name. #### `registerIconFromText(name: string, iconText: string, collection?: string): void` Registers an icon by providing its name, the SVG content as text, and an optional collection name. ### Defining an Icon Component Use the `igc-icon` tag to display registered icons. ```html ``` ### Component Properties | Name | Description | Type | Default Value | Reflected | |------------|-------------------------------------------|------------------------------------|---------------|-----------| | `name` | The name of the icon. | `string` | `undefined` | `false` | | `collection` | The collection of icons. | `string` | `default` | `false` | | `size` | The size of the icon. | `small | medium | large` | `medium` | `true` | | `mirrored` | Indicates whether to mirror the icon. | `boolean` | `false` | `true` | ### Global Methods #### `registerIcon(name: string, url: string, collection = 'default')` Registers an icon with url. **Parameters:** - `name`: `string` - The name of the icon. - `url`: `string` - The URL of the SVG icon. - `collection`: `string` (optional) - The name of the collection. Defaults to 'default'. **Return type:** `Promise` #### `registerIconFromText(name: string, iconText: string, collection = 'default')` Registers an icon with SVG text. **Parameters:** - `name`: `string` - The name of the icon. - `iconText`: `string` - The SVG content as text. - `collection`: `string` (optional) - The name of the collection. Defaults to 'default'. **Return type:** `void` ``` -------------------------------- ### Configure Vite for Custom Elements Source: https://github.com/igniteui/igniteui-webcomponents/blob/master/skills/igniteui-wc-integrate-with-framework/references/vue.md Configure Vite to recognize all tags starting with 'igc-' as custom elements to prevent unknown component warnings. ```typescript import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; export default defineConfig({ plugins: [ vue({ template: { compilerOptions: { // Treat all igc-* tags as custom elements isCustomElement: (tag) => tag.startsWith('igc-') } } }) ] }); ``` -------------------------------- ### Build Production Storybook Source: https://github.com/igniteui/igniteui-webcomponents/blob/master/README.md Execute this command to build a production-ready version of Storybook, suitable for deployment or review. ```sh npm run storybook:build ``` -------------------------------- ### Using List Item Slots Source: https://github.com/igniteui/igniteui-webcomponents/blob/master/skills/igniteui-wc-generate-from-image-design/references/gotchas.md For `igc-list-item`, use the Web Components slot anatomy to define content for start, title, subtitle, and end positions. ```html ``` -------------------------------- ### Run Bundle Size Check in CI Source: https://github.com/igniteui/igniteui-webcomponents/blob/master/skills/igniteui-wc-optimize-bundle-size/SKILL.md Execute the build and bundle size test commands in your CI environment to ensure bundle sizes remain within acceptable limits. ```bash npm run build npm run test:size ``` -------------------------------- ### Import a Theme in React Entry Point Source: https://github.com/igniteui/igniteui-webcomponents/blob/master/skills/igniteui-wc-integrate-with-framework/references/react.md Import a theme CSS file in your application's entry point (e.g., `src/main.tsx` or `src/index.tsx`) to apply styles to Ignite UI components. ```typescript import 'igniteui-webcomponents/themes/light/bootstrap.css'; ``` -------------------------------- ### Basic igc-navbar Usage Source: https://github.com/igniteui/igniteui-webcomponents/wiki/Navigation-Bar-Specification Defines a basic navigation bar with a start button, a title, and an end button. This demonstrates the core structure and slot usage. ```html Title ``` -------------------------------- ### Default Radio Group Initialization Source: https://github.com/igniteui/igniteui-webcomponents/wiki/Radio-Group-Component Demonstrates a basic radio group setup where the group automatically assigns a 'name' attribute to its child radio components. ```html Email Phone Mail ``` -------------------------------- ### Basic Splitter Initialization Source: https://github.com/igniteui/igniteui-webcomponents/wiki/Splitter Initialize a basic horizontal splitter with slotted content for two panes. By default, panes are equal in size. ```html
Start pane content
End pane content
 ``` -------------------------------- ### Create Palette Tool Source: https://github.com/igniteui/igniteui-webcomponents/blob/master/skills/igniteui-wc-customize-component-theme/SKILL.md Generate a color palette for web components using primary, secondary, and surface colors. This is suitable for simple mid-luminance base colors. ```bash Tool: create_palette Params: { platform: "webcomponents", primary: "#1976D2", secondary: "#FF9800", surface: "#FAFAFA", variant: "light" } ``` -------------------------------- ### Configure Vue CLI for Custom Elements Source: https://github.com/igniteui/igniteui-webcomponents/blob/master/skills/igniteui-wc-integrate-with-framework/references/vue.md Configure Vue CLI to recognize all tags starting with 'igc-' as custom elements to prevent unknown component warnings. ```javascript module.exports = { chainWebpack: config => { config.module .rule('vue') .use('vue-loader') .tap(options => ({ ...options, compilerOptions: { isCustomElement: tag => tag.startsWith('igc-') } })); } }; ``` -------------------------------- ### Import Theme and Register All Components Source: https://github.com/igniteui/igniteui-webcomponents/blob/master/skills/igniteui-wc-integrate-with-framework/references/vanilla-js.md To register all available Ignite UI Web Components at once, import and call `defineAllComponents`. Be aware that this approach will increase your application's bundle size. ```typescript import 'igniteui-webcomponents/themes/light/bootstrap.css'; import { defineAllComponents } from 'igniteui-webcomponents'; defineAllComponents(); ``` -------------------------------- ### Basic Switch with Properties Source: https://github.com/igniteui/igniteui-webcomponents/wiki/Switch-Specification Demonstrates a basic `igc-switch` component with several properties set, including value, checked state, disabled state, and label position. ```html Checked Switch ``` -------------------------------- ### Detect Platform Tool Source: https://github.com/igniteui/igniteui-webcomponents/blob/master/skills/igniteui-wc-customize-component-theme/SKILL.md Use the 'detect_platform' tool to automatically identify the project's platform (e.g., 'webcomponents') and set correct import paths. ```bash Tool: detect_platform ``` -------------------------------- ### Register Theme and Components in main.ts Source: https://github.com/igniteui/igniteui-webcomponents/blob/master/skills/igniteui-wc-integrate-with-framework/references/vue.md Import a theme and register necessary Ignite UI components in your main application file before mounting. ```typescript import { createApp } from 'vue'; import App from './App.vue'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; import { defineComponents, IgcButtonComponent, IgcInputComponent } from 'igniteui-webcomponents'; defineComponents(IgcButtonComponent, IgcInputComponent); createApp(App).mount('#app'); ``` -------------------------------- ### Setting Size Constraints for Panes Source: https://github.com/igniteui/igniteui-webcomponents/wiki/Splitter Define minimum and maximum size constraints for both the start and end panes. This ensures panes stay within specified boundaries during resizing. ```html
Main content (min 300px)
 ``` -------------------------------- ### Set Size Tool (Sass Output) Source: https://github.com/igniteui/igniteui-webcomponents/blob/master/skills/igniteui-wc-customize-component-theme/SKILL.md Configure the 'set_size' tool to output Sass instead of CSS by specifying the 'output' parameter. ```bash Tool: set_size → { size: "medium", output: "sass" } # Sass ``` -------------------------------- ### Initialize Date Picker Source: https://github.com/igniteui/igniteui-webcomponents/wiki/Date-picker-specification Basic initialization of the date picker component with a label. ```html ``` -------------------------------- ### Generate VSCode Custom Data Manifest Source: https://github.com/igniteui/igniteui-webcomponents/wiki/How-to-document-your-component Generates the VSCode custom data manifest for enhanced editor support. Refer to the provided links for more information on setup and usage. ```shell build:docs:vscode-schema ``` -------------------------------- ### Date Range Picker Active Date Logic Source: https://github.com/igniteui/igniteui-webcomponents/wiki/Date-Range-Picker Illustrates how the active date is determined based on the 'start' and 'end' properties of the date-range-picker. This logic applies when the 'activeDate' property is not explicitly set. ```javascript { start: *start-date*, end: null } -> // active date is *start-date* { start: *start-date*, end: *end-date* } -> // active date is *start-date* { start: null, end: *end-date* } -> // active date is *end-date* ``` -------------------------------- ### Initialize igc-textarea Source: https://github.com/igniteui/igniteui-webcomponents/wiki/Textarea Basic initialization of the igc-textarea component. ```html ``` -------------------------------- ### Lazy Load Dialog Component in Vanilla JavaScript/TypeScript Source: https://github.com/igniteui/igniteui-webcomponents/blob/master/skills/igniteui-wc-optimize-bundle-size/SKILL.md Load components only when needed to reduce initial bundle size. This example shows how to lazy load the IgcDialogComponent using dynamic import. ```typescript // Load immediately (increases initial bundle) import { defineComponents, IgcDialogComponent } from 'igniteui-webcomponents'; defineComponents(IgcDialogComponent); // Lazy load (smaller initial bundle) async function showDialog() { const { defineComponents, IgcDialogComponent } = await import('igniteui-webcomponents'); defineComponents(IgcDialogComponent); const dialog = document.createElement('igc-dialog'); // ... use dialog } ``` -------------------------------- ### Defining Base Styles for a Component Source: https://github.com/igniteui/igniteui-webcomponents/wiki/Styling-and-Themes Example of a base SCSS file for a component, utilizing utility functions and defining host element styles. This file is processed to generate a CSS.ts file. ```scss // Sample style file for the IgcTestComponent component // test-component.base.scss @use "../../../../styles/utilities" as *; :host { display: block; color: color(primary, 500); } ``` -------------------------------- ### Date Range Picker Initialization with Initial Value Source: https://github.com/igniteui/igniteui-webcomponents/wiki/Date-Range-Picker Demonstrates initializing the Date Range Picker with a specific date range value set via an attribute. ```html ``` -------------------------------- ### Indeterminate and Striped Linear Progress Indicator Source: https://github.com/igniteui/igniteui-webcomponents/wiki/Linear-Progress-Indicator-Specification Displays an infinitely looping loading progress for an action with an unknown completion time. This example shows an indeterminate and striped linear progress indicator. ```html ``` -------------------------------- ### Cursor MCP Server Configuration Source: https://github.com/igniteui/igniteui-webcomponents/blob/master/skills/igniteui-wc-choose-components/reference/mcp-setup.md Set up the `.cursor/mcp.json` file for Cursor IDE to integrate with the Ignite UI CLI MCP server. This configuration uses `npx -y` to manage the `igniteui-cli` installation. ```json { "mcpServers": { "igniteui-cli": { "command": "npx", "args": ["-y", "igniteui-cli", "mcp"] } } } ``` -------------------------------- ### Instantiate Months View Source: https://github.com/igniteui/igniteui-webcomponents/wiki/Calendar-Views-Specification Instantiate the months view as a separate component. ```html ``` -------------------------------- ### Route-Based Code Splitting with React Router Source: https://github.com/igniteui/igniteui-webcomponents/blob/master/skills/igniteui-wc-optimize-bundle-size/SKILL.md Implement route-based code splitting in React applications using React Router. This example shows how to lazy load route components for better performance. ```tsx import { BrowserRouter, Routes, Route } from 'react-router-dom'; import { lazy, Suspense } from 'react'; // Lazy load route components const HomePage = lazy(() => import('./pages/Home')); const DashboardPage = lazy(() => import('./pages/Dashboard')); function App() { return ( Loading...}> } /> } /> ); } ```