| button | ||||
|---|---|---|---|---|
| Chart (legacy) | A versatile component for visualizing data through various types of charts and graphs. | pie-chart-l.svg | ||
| Basic Chart | A versatile component for visualizing data through various types of charts and graphs. | bar-chart-l.svg | ||
| Candlestick Chart | A style of financial chart used to describe price movements of a security, derivative, or currency. | candlestick-chart-l.svg | ||
| Funnel Chart | A visualization tool for displaying the progressive reduction of data as it passes through stages. | funnel-chart-l.svg | ||
| Gauge Chart | A chart that displays data as a reading on a dial, useful for indicating the status or level of something. | gauge-chart-l.svg | ||
| Graph Chart | A diagram representing a network of nodes connected by edges, useful for showing interconnections and relationships. | graph-chart-l.svg | ||
| Heatmap Chart | A graphical representation of data where individual values are represented as colors. | heatmap-chart-l.svg | ||
| Radar Chart | A graphical method of displaying multivariate data in the form of a two-dimensional chart of three or more quantitative variables. | radar-chart-l.svg | ||
| Sankey Chart | A flow diagram in which the width of the arrows is proportional to the flow rate, used to show energy, material, or cost transfers. | sankey-chart-l.svg | ||
| Sunburst Chart | A radial space-filling visualization technique that illustrates hierarchical relationships through layers of a circle. | sunburst-chart-l.svg | ||
| Theme River Chart | A visualization resembling a stream graph that shows changes in a data set over time across categories. | themeriver-chart-l.svg | ||
| Tree Chart | A diagram that visually represents hierarchy in a tree-like structure, showing relationships among various nodes. | tree-chart-l.svg | ||
| Treemap Chart | A chart that uses nested rectangles to represent hierarchical data proportionately. | treemap-chart-l.svg | ||
| Openlayers Geomap | A component for displaying interactive maps using OpenLayers, with support for various map layers and features. | geomap-layers-l.svg | ||
| Geo Map Charts | A component for visualizing geographical data on interactive maps with dynamic charts. | geomap-charts-l.svg | ||
| Table | A rich table component for displaying data in a structured table format, with options for sorting and filtering, tree Data display and extensible Rows. | table-l.svg | ||
| Pivot Table | A data summarization and analysis tool for organizing and aggregating data in a tabular format. | pivot-table-l.svg | ||
| Mermaid Chart | A component for rendering complex diagrams and flowcharts based on Mermaid syntax. | mermaid-chart-l.svg | ||
| Timeline | A component for displaying events or actions in a chronological order, visually represented along a linear timeline. | timeline-l.svg | ||
| Progress | A visual indicator of progress, typically used to show the completion status of a task. | progress-l.svg | ||
| Progress Circle | A circular progress indicator, often used for loading states or time-bound tasks. | progress-circle-l.svg | ||
| Shapes | A collection of geometric shapes for use with diagrams, illustrations, and visualizations. | shapes-l.svg | ||
| Text Display | A simple component for displaying static or dynamic text content inclusive Markdown formatting. | text-display-l.svg |
| button | ||||
|---|---|---|---|---|
| Responsive Layout | A layout component designed to adapt and respond to different screen sizes and devices, ensuring a consistent user experience. | resposive-layout-l.svg | ||
| Page Layout Container | A container which offers to create a layout with header, sider, footer and main content areas. | page-layout-l.svg | ||
| Column Layout | A layout component designed to adapt and respond to different screen sizes and devices, ensuring a consistent user experience. | column-layout-l.svg | ||
| Float Text Container | Float Text Container component. | floating-text-layout-l.svg | ||
| Content Card | A card component for displaying organized information or content in a structured manner. | card-layout-l.svg | ||
| Tabbed Container | A container with tabbed navigation for organizing content into separate panels. | tabbed-container-l.svg | ||
| Collapsible Container | A container that can be expanded or collapsed, ideal for managing content visibility. | collapsible-container-l.svg | ||
| Container | A general-purpose container for layout and organization of UI elements. | container-l.svg | ||
| List View | A component for displaying a list of items or data, where you can place other components inside. Like a repeater. | list-view-l.svg | ||
| Grid | A flexible grid component for creating structured layouts with rows and columns as an extension to the List View component. | grid-view-l.svg | ||
| Modal | A pop-up modal component for displaying content, alerts, or forms in focus. | modal-l.svg | ||
| Drawer | A sliding panel component that can be used for additional navigation or content display, typically emerging from the edge of the screen. | drawer-l.svg | ||
| Divider | A visual divider component, used to separate content or sections in a layout. | divider-l.svg | ||
| Navigation | A navigation component for creating menus, breadcrumbs, or tabs for site navigation. | navigation-l.svg | ||
| Step Control | A control with step options to offer visual guided steps for applications like forms or wizards. | steps-l.svg | ||
| Cascader | A multi-level dropdown for hierarchical data selection, such as selecting a location. | cascader-l.svg | ||
| Link | A hyperlink display component for navigation or linking to external resources. | link-l.svg | ||
| Float Button | A floating action button for prominent and quick actions. | floating-button-l.svg | ||
| Tree | A tree structure component for displaying hierarchical data, such as file systems or organizational charts. | tree-display-l.svg | ||
| Tree Select | A selection component that presents options in a hierarchical tree format, allowing for organized and nested selections. | tree-select-l.svg | ||
| Text Display | A simple component for displaying static or dynamic text content inclusive Markdown formatting. | text-display-l.svg |
| button | ||||
|---|---|---|---|---|
| Form | A container component for building structured forms with various input types. | form-l.svg | ||
| JSON Schema Form | A dynamic form component generated based on a JSON schema. | json-schema-form-l.svg | ||
| JSON Editor | An editor component for creating and modifying JSON data with validation and syntax highlighting. | json-editor-l.svg | ||
| JSON Explorer | A component for visually exploring and interacting with JSON data structures. | json-viewer-l.svg | ||
| Rich Text Editor | An advanced text editor supporting rich formatting options like bold, italics, and lists. | rich-text-editor-l.svg | ||
| Input | A basic text input field allowing users to enter and edit text. | input-l.svg | ||
| Password | A secure field for password input, masking the characters for privacy. | password-l.svg | ||
| Number Input | A field specifically for numerical input, with controls for incrementing and decrementing values. | number-input-l.svg | ||
| Text Area | A multi-line text input for longer form content, such as comments or descriptions. | text-area-input-l.svg | ||
| Auto Complete | An input field that provides suggestions as you type, enhancing user experience and accuracy. | auto-complete-input-l.svg | ||
| Switch | A toggle switch for on/off or yes/no type decisions. | switch-l.svg | ||
| Checkbox | A standard checkbox for options that can be selected or deselected. | checkbox-l.svg | ||
| Radio | Radio buttons for selecting one option from a set, where only one choice is allowed. | radio-button-l.svg | ||
| Date | A date picker component for selecting dates from a calendar interface. | date-select-l.svg | ||
| Date Range | A component for selecting a range of dates, useful for booking systems or filters. | date-range-select-l.svg | ||
| Time | A time selection component for choosing specific times of the day. | time-select-l.svg | ||
| Time Range | A component for selecting a range of time, often used in scheduling applications. | time-range-select-l.svg | ||
| Slider | A graphical slider component for selecting a value or range within a defined scale. | slider-l.svg | ||
| Range Slider | A dual-handle slider to select a range of values, useful for filtering or setting limits. | range-slider-l.svg | ||
| Form Button | A versatile button component for submitting forms, triggering actions, or navigating. | button-l.svg | ||
| Icon Button | A button for controlling functions like start, end, mute, or share. | icon-button-l.svg | ||
| Dropdown | A dropdown menu for compactly displaying a list of options. | dropdown-l.svg | ||
| Toggle Button | A button that can toggle between two states or options. | toggle-button-l.svg | ||
| Segmented Control | A control with segmented options for quickly toggling between multiple choices. | segmented-control-l.svg | ||
| Rating | A component for capturing user ratings, displayed as stars. | rating-l.svg | ||
| Select | A dropdown menu for selecting from a list of options. | select-l.svg | ||
| Multiselect | A component that allows selection of multiple items from a dropdown list. | multiselect-l.svg |
| button | ||||
|---|---|---|---|---|
| Screen Share Stream | Access and Displays the Stream of shared Screens in the Browser. | screen-share-stream-l.svg | ||
| Camera Stream | Access and Displays the Stream of the Camera of the current User and Attendees. | camera-stream-l.svg | ||
| Agora Meeting Controller | Meeting Component to manage and secure a Meeting Room. | meeting-room-l.svg | ||
| Avatar | Displays user avatars or profile images for personalized identification. | avatar-l.svg | ||
| Avatar Group | A group of avatars to represent multiple users or entities in a compact and visually appealing way. | avatargroup-l.svg | ||
| Comment | A component for adding and displaying user comments, supporting threaded replies and user interaction. | comment-l.svg | ||
| Mention | A component that supports mentioning users or tags within text content, typically used in social media or collaborative platforms. | mention-l.svg | ||
| Icon Button | A button for controlling functions like start, end, mute, or share. | icon-button-l.svg |
| button | ||||
|---|---|---|---|---|
| Calendar | A calendar component for displaying dates and events, with options for month, week, or day views. | calendar-l.svg | ||
| Timer | A component that displays a countdown or elapsed time, useful for tracking durations and deadlines. | timer-l.svg | ||
| Gantt Chart | A chart that illustrates a project schedule, showing the start and finish dates of elements and dependencies. | |||
| Hillchart | A visualization component for displaying project management state data in a hill chart format. | hillchart-l.svg | ||
| BPMN Editor | A component for viewing, creating and editing BPMN diagrams, supporting various BPMN elements and features. | bpmn-editor-l.svg | ||
| Progress | A visual indicator of progress, typically used to show the completion status of a task. | progress-l.svg | ||
| Progress Circle | A circular progress indicator, often used for loading states or time-bound tasks. | progress-circle-l.svg | ||
| Timeline | A component for displaying events or actions in a chronological order, visually represented along a linear timeline. | timeline-l.svg |
| button | ||||
|---|---|---|---|---|
| Calendar | A calendar component for displaying dates and events, with options for month, week, or day views. | calendar-l.svg | ||
| Timer | A component that displays a countdown or elapsed time, useful for tracking durations and deadlines. | timer-l.svg | ||
| Date | A date picker component for selecting dates from a calendar interface. | date-select-l.svg | ||
| Date Range | A component for selecting a range of dates, useful for booking systems or filters. | date-range-select-l.svg | ||
| Time | A time selection component for choosing specific times of the day. | time-select-l.svg | ||
| Time Range | A component for selecting a range of time, often used in scheduling applications. | time-range-select-l.svg |
| button | ||||
|---|---|---|---|---|
| BPMN Editor | A component for viewing, creating and editing BPMN diagrams, supporting various BPMN elements and features. | bpmn-editor-l.svg | ||
| File Upload | A component for uploading files, with support for drag-and-drop and file selection. | file-upload-l.svg | ||
| File Viewer | A component for viewing various types of files, including documents and images. | file-viewer-l.svg | ||
| QR Code | A component for displaying QR codes, useful for quick scanning and information transfer. | qr-code-display-l.svg | ||
| Tree | A tree structure component for displaying hierarchical data, such as file systems or organizational charts. | tree-display-l.svg | ||
| Tree Select | A selection component that presents options in a hierarchical tree format, allowing for organized and nested selections. | tree-select-l.svg | ||
| Transfer | Facilitates data transfer between two lists with drag-and-drop functionality. | transfer-list-l.svg |
| button | ||||
|---|---|---|---|---|
| QR Code | A component for displaying QR codes, useful for quick scanning and information transfer. | qr-code-display-l.svg | ||
| Scanner | A component for scanning barcodes, QR codes, and other similar data. | scanner-l.svg | ||
| Signature | A component for capturing digital signatures, useful for approvals and verification processes. | signature-l.svg | ||
| Select | A dropdown menu for selecting from a list of options. | select-l.svg | ||
| Multiselect | A component that allows selection of multiple items from a dropdown list. | multiselect-l.svg | ||
| Tour | A product tour for guiding users. | |||
| Tree | A tree structure component for displaying hierarchical data, such as file systems or organizational charts. | tree-display-l.svg | ||
| Tree Select | A selection component that presents options in a hierarchical tree format, allowing for organized and nested selections. | tree-select-l.svg | ||
| Transfer | Facilitates data transfer between two lists with drag-and-drop functionality. | transfer-list-l.svg | ||
| Turnstile Captcha | A captcha component to verify users against bots. | turnstile-captcha-l.svg |
| button | ||||
|---|---|---|---|---|
| Image | A component for displaying images, supporting various formats based on URI or Base64 Data. | image-l.svg | ||
| Image Carousel | A rotating carousel component for showcasing images, banners, or content slides. | image-carousel-l.svg | ||
| Audio | A component for embedding audio content, with controls for playback and volume adjustment. | audio-player-l.svg | ||
| Video | A multimedia component for embedding and playing video content, with support for various formats. | video-player-l.svg | ||
| Shapes | A collection of geometric shapes for use with diagrams, illustrations, and visualizations. | shapes-l.svg | ||
| Image Editor | An interactive component for editing and manipulating images, offering various tools and filters. | image-editor-l.svg | ||
| Color Picker | Intuitive color selection for customization. | colorpicker-l.svg | ||
| Tour | A product tour for guiding users. | |||
| Text Display | A simple component for displaying static or dynamic text content inclusive Markdown formatting. | text-display-l.svg | ||
| Icon | Use various Icons to enhance the visual appeal and user experience of your application. | icon-l.svg | ||
| JSON Lottie | A component for displaying Lottie animations, providing lightweight and scalable animations based on JSON data. | lottie-animation-l.svg |
| button | ||||
|---|---|---|---|---|
| IFrame | An inline frame component for embedding external web pages and apps or content within the application. | iframe-l.svg | ||
| Custom Component | A flexible, programmable component for creating unique, user-defined UI elements tailored to your specific needs. | custom-code-l.svg |
