> ## Documentation Index
> Fetch the complete documentation index at: https://devdocs-shaunak-branch.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# UI Component Library

<Warning>This content is currently WIP. Diagrams, content, and structure are subject to change.</Warning>

This section introduces the UI Component Library provided by the C3 Agentic AI Platform. This library includes a comprehensive set of pre-built UI components that you can use to assemble your application's interface quickly and consistently.

## Component Library Overview

The C3 AI Component Library provides ready-to-use components ranging from basic elements like buttons and forms to complex visualizations like charts and maps. These components follow consistent design patterns and integrate seamlessly with the platform's data binding capabilities.

{/* SCREENSHOT NEEDED: Visual catalog of component categories */}

{/* Caption: Overview of component categories showing examples of each type */}

Components are organized into functional categories based on their purpose:

<CardGroup cols={2}>
  <Card title="Layout components">
    Organize content on the page, creating structure and visual hierarchy.
  </Card>

  <Card title="Data visualization components">
    Present data in visual formats that help users understand patterns and insights.
  </Card>

  <Card title="Data input components">
    Allow users to enter, edit, and filter data within the application.
  </Card>

  <Card title="Navigation components">
    Help users move through the application and understand their current location.
  </Card>
</CardGroup>

{/* DIAGRAM NEEDED: Component relationships */}

{/* 
Diagram should show:
1. How components relate to each other (nesting, data flow)
2. Common component combinations
3. Component hierarchy
*/}

## Layout Components

Layout components provide the structural foundation for your interface, organizing other components on the page in a coherent, responsive manner.

{/* SCREENSHOT NEEDED: Layout components in action */}

{/* Caption: Examples of layout components showing different arrangements and responsive behaviors */}

### Key Layout Components

* **Layout Container**: Organizes content with headers and flexible layouts
* **Grid Layout**: Creates responsive grid-based layouts with rows and columns
* **Layout Side Panel**: Provides a main content area with optional side panels

<details>
  <summary>Example: Basic Layout Container</summary>

  ```json
  {
    "type": "UiSdlConnected<UiSdlLayoutContainer>",
    "component": {
      "title": { "title": "Dashboard Overview" },
      "children": [
        [{ "id": "StatusSummary" }, { "id": "PerformanceMetrics" }]
      ]
    }
  }
  ```
</details>

## Data Visualization Components

Data visualization components transform raw data into visual representations that help users identify patterns, trends, and insights.

{/* SCREENSHOT NEEDED: Data visualization components showing different chart types */}

{/* Caption: Examples of data visualization components showing different ways to represent information */}

### Key Visualization Components

* **Data Grid**: Displays tabular data with sorting, filtering, and pagination
* **Charts**: Includes line, bar, pie charts, and histograms for different data types
* **Graph Visualization**: Shows relationships between entities as nodes and edges
* **Map**: Displays geospatial data with customizable markers and regions

<details>
  <summary>Example: Simple Pie Chart</summary>

  ```json
  {
    "type": "UiSdlConnected<UiSdlPieChart>",
    "component": {
      "header": { "title": "Status Distribution" },
      "dataSpec": {
        "dataType": "AssetStatus",
        "value": {
          "fieldName": "status",
          "aggregationSelector": "COUNT"
        }
      }
    }
  }
  ```
</details>

### Choosing the Right Visualization

Select visualizations based on the type of data and the insights you want to highlight:

* Use **line charts** for time series data and trends
* Use **bar charts** for comparing values across categories
* Use **pie charts** for showing proportions of a whole
* Use **data grids** for detailed data exploration
* Use **maps** for geospatial data and location-based insights

## Data Input Components

Data input components allow users to enter, edit, and filter data within the application.

{/* SCREENSHOT NEEDED: Data input components in use */}

{/* Caption: Examples of forms, filter panels, and search interfaces */}

### Key Input Components

* **Form**: Collects structured data from users with validation
* **Filter Panel**: Allows users to filter data displayed in other components
* **Search Bar**: Enables users to search for specific items or content

<details>
  <summary>Example: Basic Form</summary>

  ```json
  {
    "type": "UiSdlConnected<UiSdlForm>",
    "component": {
      "title": { "title": "Add New Asset" },
      "dataSpec": {
        "fieldSets": {
          "type": "[UiSdlFormFieldSet]",
          "value": [
            {
              "title": "Asset Information",
              "fields": [
                {
                  "label": "Name",
                  "fieldName": "name",
                  "required": true
                }
              ]
            }
          ]
        }
      }
    }
  }
  ```
</details>

## Navigation Components

Navigation components help users move through the application and understand their current location.

{/* SCREENSHOT NEEDED: Navigation components showing menu structures */}

{/* Caption: Examples of navigation menus, tab panels, and breadcrumbs */}

### Key Navigation Components

* **Navigation Menu**: Provides the primary navigation structure
* **Page Title**: Displays the current page title with optional actions
* **Tab Panel**: Organizes content into tabbed sections

<details>
  <summary>Example: Simple Tab Panel</summary>

  ```json
  {
    "type": "UiSdlConnected<UiSdlTabPanel>",
    "component": {
      "title": { "text": "Asset Details" },
      "activeTab": "Overview",
      "tabComponents": [
        { "id": "Overview", "title": "Overview" },
        { "id": "Performance", "title": "Performance" },
        { "id": "Maintenance", "title": "Maintenance" }
      ]
    }
  }
  ```
</details>

## Basic Components

Basic components provide the fundamental building blocks for your interface.

{/* SCREENSHOT NEEDED: Basic components showing different states */}

{/* Caption: Examples of buttons, cards, and other basic components in different states */}

### Key Basic Components

* **Button**: Triggers actions when clicked
* **Modal**: Displays focused content that requires attention
* **Card**: Contains related content in a visually distinct container
* **Image**: Displays images with various sizing and alignment options

## Component Composition Patterns

Components can be combined in various ways to create complex interfaces. Here are some common patterns:

{/* DIAGRAM NEEDED: Component composition patterns */}

{/* 
Diagram should show:
1. Dashboard layout pattern
2. Master-detail pattern
3. Wizard pattern
4. Analytics dashboard pattern
*/}

### Dashboard Pattern

Combine grid layouts, cards, and visualizations to create information-rich dashboards:

{/* SCREENSHOT NEEDED: Example dashboard */}

{/* Caption: Example dashboard showing multiple components working together */}

### Master-Detail Pattern

Use a list or grid for selection and detailed views for showing additional information:

{/* SCREENSHOT NEEDED: Master-detail interface */}

{/* Caption: Master-detail interface showing selection and detailed information */}

## Performance Best Practices

When using the UI Component Library, follow these best practices to ensure optimal performance:

1. **Lazy load components** that aren't immediately visible
2. **Use pagination and virtualization** for large datasets
3. **Minimize the number of components** on a single page
4. **Optimize data queries** to fetch only the data you need

<details>
  <summary>Example: Lazy Loading Components</summary>

  ```jsx
  // Lazy loading components
  const DetailedAnalytics = lazy(() => import('./DetailedAnalytics'));

  function Dashboard() {
    return (
      <Suspense fallback={<LoadingIndicator />}>
        <Tabs>
          <Tab label="Overview">
            <OverviewPanel />
          </Tab>
          <Tab label="Analytics">
            <DetailedAnalytics />
          </Tab>
        </Tabs>
      </Suspense>
    );
  }
  ```
</details>

## Practical Application: Asset Monitoring Dashboard

Here's how you might combine components to create an asset monitoring dashboard:

{/* SCREENSHOT NEEDED: Complete asset monitoring dashboard */}

{/* Caption: Complete asset monitoring dashboard built with C3 AI UI components */}

This dashboard combines:

* Layout components for structure
* Data visualization components for insights
* Navigation components for organization
* Data input components for filtering

The dashboard provides a comprehensive view of asset status, performance metrics, and maintenance needs, allowing users to quickly identify issues and take action.

## Related Concepts

<CardGroup cols={3}>
  <Card title="UI Architecture" href="./ui-architecture">
    Learn more about the architecture of the UI framework.
  </Card>

  <Card title="Data Binding and State Management" href="./data-binding-state-management">
    Discover how to connect UI components to data and manage state.
  </Card>

  <Card title="UI Development Workflow" href="./ui-development-workflow">
    Learn about the workflow for developing UI applications.
  </Card>
</CardGroup>

## Ready-to-Use Components for Application Developers

The C3 Agentic AI Platform provides a rich set of pre-built components and tools that accelerate application development, allowing you to focus on solving business problems rather than building infrastructure.

### Comprehensive UI Component Library

Application developers can leverage the C3 Agentic AI Platform's extensive UI/UX components to build sophisticated, data-driven applications without having to create interface elements from scratch. These pre-built components accelerate development while ensuring a consistent, professional look and feel across your applications.

#### Layout Components

* Layout Container
* Grid Layout
* Layout Side Panel
* Collapsible Component

#### Data Visualization

* **Tables & Lists**:
  * Data Grid
  * Card List
  * Definition List
  * Collection List
  * Tree List
* **Charts**:
  * Line chart
  * Bar chart
  * Scatter plot
  * Pie chart
  * Histogram
  * Waterfall chart
  * Parallel Coordinates chart
* **Other Visualizations**:
  * Graph Visualization
  * Time Graph
  * Metric Tile
  * Map
  * Diagram Viewer

#### Input Components

* **Forms**:
  * `UiSdlForm` (single and multi-step)
  * Customizable fields
  * Built-in validation
* **Field Types**:
  * `UiSdlSingleSearch`
  * `UiSdlSingleSearchFilter`
  * `UiSdlMultipleSearch`
  * `UiSdlMultipleSearchFilter`
  * `UiSdlTextInput`
  * `UiSdlTextAreaInput`
  * `UiSdlCheckboxTree`
  * `UiSdlDateRange`
  * `UiSdlDateTimeInput`
  * `UiSdlDateTimeRangeInput`
  * `UiSdlIconSelectInput`
  * `UiSdlNumberInput`
  * `UiSdlPassword`
  * `UiSdlRadioButtonGroup`
  * `UiSdlSegmentedButton`
* **Specialized Inputs**:
  * Code Editor (`UiSdlCodeEditor`)
  * File Upload (`UiSdlFileUpload`)

#### Navigation & UI Framework

* **Navigation Components**:
  * Navigation Menu
  * Page Title (with tabs and actions)
  * Tab Panel
* **Other UI Components**:
  * Button
  * Modal
* **Framework Features**:
  * Angular-based architecture
  * Customizable themes
  * Internationalization support