Igniteui Wc Choose Components

Conversational / AI

Step-by-Step: Choosing Components for a UI

Follow these steps when an agent or user describes a UI requirement:

Step 1 — Identify UI patterns

Break the described UI into atomic patterns. Examples:

• "A booking form" → date input, text inputs, button, maybe a calendar picker
• "An admin dashboard" → navbar, nav drawer, cards, data grid, charts
• "A notification center" → snackbar or toast, badge, list
• "A settings page" → tabs or accordion, switch, input, select, button

Step 2 — Map patterns to components

Use the Component Catalogue tables above to find matching components. When in doubt:

Step 3 — Check the package

Confirm which package provides the component:

• MIT components (inputs, layout, notifications, scheduling, chat) → igniteui-webcomponents
• Advanced grids (Data Grid, Tree Grid, Hierarchical Grid, Pivot Grid) → igniteui-webcomponents-grids (commercial)
• Lightweight grid (Grid Lite) → igniteui-grid-lite (MIT)
• Docking layout → igniteui-dockmanager (commercial)
• Charts & visualizations (Category Chart, Data Chart, Financial Chart, Pie Chart, Sparkline, Treemap, etc.) → igniteui-webcomponents-charts (commercial)

Step 4 — Look up component documentation

These tools serve different data sources — call the right one to avoid guessing:

• Usage patterns, HTML examples, slots → get_doc serves the component's topic-page (prose guide, code samples, slot names, CSS examples). Use the kebab-case doc name returned by list_components:

  get_doc({ framework: "webcomponents", name: "<doc-name>" })

• Full property/method/event API → get_api_reference serves class-level reflection data (every @property, method signature, event name with types). It does NOT overlap with get_doc — the topic page rarely lists all properties. Use search_api first when you don't know the exact class name (e.g. IgcCarouselComponent):

  search_api({ platform: "webcomponents", query: "<component keyword>" })
  get_api_reference({ platform: "webcomponents", component: "<ClassName>" })

For feature-based questions (e.g., "how does combo filtering work"), use search_docs instead:

search_docs({ framework: "webcomponents", query: "<feature keyword>" })

Step 5 — Provide a starter code snippet

Once components are identified, give the user a minimal working snippet. Example for an admin dashboard shell:

import {
  defineComponents,
  IgcNavbarComponent,
  IgcNavDrawerComponent,
  IgcCardComponent,
  IgcButtonComponent,
} from 'igniteui-webcomponents';

defineComponents(IgcNavbarComponent, IgcNavDrawerComponent, IgcCardComponent, IgcButtonComponent);

<igc-navbar><h1>My Dashboard</h1></igc-navbar>
<igc-nav-drawer>
  <igc-nav-drawer-item><span slot="content">Home</span></igc-nav-drawer-item>
</igc-nav-drawer>
<igc-card>
  <igc-card-header><h3 slot="title">Summary</h3></igc-card-header>
  <igc-card-content>Content goes here</igc-card-content>
</igc-card>

Common UI Scenarios → Recommended Component Sets

Login / Authentication Form

• <igc-input> — email and password fields
• <igc-checkbox> — "Remember me"
• <igc-button> — submit
• <igc-snackbar> — error/success feedback

User Profile / Settings Page

• <igc-avatar> — profile picture
• <igc-tabs> — section navigation (Profile, Security, Notifications)
• <igc-input> / <igc-textarea> — editable fields
• <igc-switch> — feature toggles
• <igc-select> — preference dropdowns
• <igc-button> — save/cancel actions

Data Table / Admin List View

• <igc-input> — search bar
• <igc-combo> — filter dropdowns
• <igc-grid> (Grid Lite) or Data Grid — tabular data
• <igc-button> / <igc-icon-button> — actions
• <igc-dialog> — confirm delete modal
• <igc-badge> — status indicators

Booking / Reservation Form

• <igc-date-range-picker> — check-in / check-out
• <igc-input> — guest details
• <igc-select> — room type
• <igc-stepper> — multi-step booking flow
• <igc-button> — next / confirm
• <igc-toast> — booking confirmation

Analytics / Reporting Dashboard

• <igc-navbar> — top bar
• <igc-nav-drawer> — side navigation
• <igc-card> — KPI summary cards
• <igc-tabs> or <igc-tile-manager> — section layout
• Data Grid or Pivot Grid — detailed data tables
• <igc-linear-progress> / <igc-circular-progress> — loading states

Notification / Activity Feed

• <igc-list> — activity items
• <igc-avatar> — user avatars in each item
• <igc-badge> — unread count
• <igc-snackbar> — real-time alerts
• <igc-chip> — filter tags (All, Mentions, Replies)

AI / Chatbot Interface

• <igc-chat> — full chat UI with message threading
• <igc-input> or <igc-textarea> — message input
• <igc-icon-button> — send button
• <igc-avatar> — bot and user avatars
• <igc-circular-progress> — "thinking" indicator

Common Issues & Solutions

"I can't find a component for X"

1. Call list_components({ framework: "webcomponents" }) or use search_docs with a feature keyword to find the best match
2. Consider composing two simpler components (e.g., <igc-card> + <igc-list> for a list card)

"Which grid should I use?"

"I need React support"

Use the igniteui-react package. Components are wrapped with React-friendly event bindings and props. See the igniteui-wc-integrate-with-framework skill for setup.

"How do I get commercial components?"

Visit https://www.infragistics.com/products/ignite-ui-web-components or contact Infragistics sales for licensing information.

Additional Resources