This content is currently WIP. Diagrams, content, and structure are subject to change.
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. Components are organized into functional categories based on their purpose:

Layout components

Organize content on the page, creating structure and visual hierarchy.

Data visualization components

Present data in visual formats that help users understand patterns and insights.

Data input components

Allow users to enter, edit, and filter data within the application.

Navigation components

Help users move through the application and understand their current location.

​
Layout Components

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

​
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

​
Data Visualization Components

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

​
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

​
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.

​
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
Navigation components help users move through the application and understand their current location.

​
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

​
Basic Components

Basic components provide the fundamental building blocks for your interface.

​
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:

​
Dashboard Pattern

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

​
Master-Detail Pattern

Use a list or grid for selection and detailed views for showing additional 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

​
Practical Application: Asset Monitoring Dashboard

Here’s how you might combine components to create an asset monitoring dashboard: 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.

UI Architecture

Learn more about the architecture of the UI framework.

Data Binding and State Management

Discover how to connect UI components to data and manage state.

UI Development Workflow

Learn about the workflow for developing UI applications.

​
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 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