Note: This list may not be complete. No component, listed or unlisted, may be used outside of
the technology in which it is released. The usage decision for a component is found in the Decision
and Decision Constraints.
BUTTONS - Button
|
The React Button is a custom Hypertext Markup Language 5 (HTML5) button component. |
BUTTONS - Button Group
|
The React Button Group is a series of buttons aligned vertically or horizontally. |
BUTTONS - Chips
|
The React Chips is a component that provides small blocks of text information. Chips can also contain avatars, images, letters, and close icons. |
BUTTONS - Dropdown Menu
|
The React Dropdown Menu is a graphical user interface component that lets users choose from a list of actions that can be triggered. |
BUTTONS - Floating Action Button
|
The React Floating Action Button (FAB) is an extension of React Button that appears in front of all the contents of the screens and performs the primary action. |
BUTTONS - Progress Button
|
The React Progress Button or spinner button is a graphical user interface component used to visualize the progression of an operation in the background. |
BUTTONS - Speed Dial
|
The React Speed Dial component is an extension of the React Floating Action Button that displays a list of action buttons when clicked. It displays action buttons in linear and radial directions. |
BUTTONS - Split Button
|
The React Split Button triggers a default action when the primary button is clicked and provides a list of actions when the drop-down button is clicked. |
CALENDARS - Calendar
|
The React Calendar is a component to display the date and days of the week. |
CALENDARS - DatePicker
|
The React DatePicker is a component that allows end users to enter or select a date value. |
CALENDARS - DateRangePicker
|
The React Date Range Picker is a component that allows end users to select start and end date values as a range from a calendar pop-up or by entering values directly in the Hypertext Markup Language (HTML) input text box. |
CALENDARS - DateTime Picker
|
The React DateTime Picker is a component that allows end users to enter or select date and time values from a pop-up calendar and drop-down time list. |
CALENDARS - Gantt Chart
|
The React Gantt Chart is a project planning and management tool used to display and manage hierarchical tasks with timeline details. |
CALENDARS - Scheduler
|
The React Scheduler, or event calendar, is an event calendar component that helps users manage their time efficiently. |
DATA VISUALIZATION - Barcode Generator
|
The React Quick Response (QR) Code (Barcode) generator component is a component that displays industry-standard one dimensional and two dimensional barcodes in React technologies. |
DATA VISUALIZATION - Bullet Chart
|
The React Bullet Chart is used to visually compare measures, like the commonly used bar chart. The bullet chart displays one or more measures and compares them with a target value. |
DATA VISUALIZATION - Charts
|
React Charts is a component for visualizing data in both mobile and web programs. |
DATA VISUALIZATION - Circular Gauge
|
The React Circular Gauge is a component for visualizing numeric values on a circular scale with features like multiple axes and rounded corners. |
DATA VISUALIZATION - Diagram
|
The React Diagram is an architecture diagram library for visualizing, creating, and editing interactive diagrams. |
DATA VISUALIZATION - Dropdown Tree
|
The React Dropdown Tree component is a textbox component that allows the user to select single or multiple values from hierarchical data in a tree-like structure. |
DATA VISUALIZATION - HeatMap Chart
|
The React HeatMap Chart is a graphical representation of two-dimensional data where the values are represented with gradient or solid color variations. |
DATA VISUALIZATION - Kanban
|
The React Kanban board is a task scheduling control that provides user interface representation to manage multiple stages of work. The Kanban board is used in features such as task scheduler, project management, software or product development, manufacturing process, and personal task management. |
DATA VISUALIZATION - Linear Gauge
|
The React Linear Gauge is a control for visualizing numeric values in a linear scale with features like multiple axes, and different orientations. |
DATA VISUALIZATION - Maps
|
The React Maps component is ideal for rendering maps from Geo-JavaScript Object Notation(GeoJSON) data or other map providers. |
DATA VISUALIZATION - Range Selector
|
React Range Selector is an interface for selecting a small range from a larger collection. |
DATA VISUALIZATION - Smith Chart
|
The React Smith Chart is a control for showing the parameters of transmission lines in high-frequency circuit features. |
DATA VISUALIZATION - Sparkline Charts
|
The React Sparkline Charts is a replacement for normal charts to display trends in a very small area. |
DATA VISUALIZATION - Stock Chart
|
React Stock Chart is a financial charting package. |
DATA VISUALIZATION - TreeMap
|
The React TreeMap is a component used to visualize both hierarchical and flat data. |
DROPDOWNS - AutoComplete
|
The React AutoComplete is a textbox component that provides a list of suggestions to select from as the user types. |
DROPDOWNS - ComboBox
|
The React ComboBox component is a drop-down list with editable textbox that also allows users to choose an option from a predefined pop-up list. |
DROPDOWNS - Dropdown List
|
The React Dropdown List is a quick replacement of the Hypertext Markup Language (HTML) select tags. |
DROPDOWNS - ListBox
|
The React ListBox is a graphical user interface for displaying a list of items with multi-selection options. |
DROPDOWNS - Mention
|
The React Mention is an autocomplete-like component that populates mentions or hashtags. |
DROPDOWNS - MultiSelect Dropdown
|
The React Multi Select Dropdown is a quick replacement for the Hypertext Markup Language (HTML) select tag for selecting multiple values. |
FILE VIEWERS & EDITORS - Image Editor
|
The React Image Editor component is a graphical user interface used for editing images. |
FILE VIEWERS & EDITORS - In-place Editor
|
The React In-Place Editor component is used for editing a value dynamically within its context (in-place). |
FILE VIEWERS & EDITORS - Portable Document Format (PDF) Viewer
|
The React Portable Document Format (PDF) Viewer is a component for viewing and printing PDF files. |
FILE VIEWERS & EDITORS - Word Processor
|
The React Word Processor is a user interface (UI) component with editing capabilities like Microsoft Word. Also known as the document editor, this component is used to create, edit, view, and print Word documents. |
FILE VIEWERS & EDITORS - Rich Text Editor
|
The React Rich Text Editor is a what you see is what you get (WYSIWYG) Hypertext Markup Language (HTML) editor and WYSIWYG Markdown editor. The Rich Text Editor is used to create blogs, forum posts, notes sections, support tickets (incidents), comment sections, and messaging programs. |
FORMS - Query Builder User Interface (UI)
|
The React Query Builder is a user interface (UI) for filtering large amounts of data by creating or editing conditions that can be combined with data visualization controls like DataGrid and Charts to view the filtered data. |
GRIDS - Data Grid
|
The React DataGrid is displays data in a tabular format. |
GRIDS - Pivot Table
|
React Pivot Table is used to organize and summarize business data and display the result in a cross-table format. |
GRIDS - Spreadsheets
|
The React Spreadsheet, also known as the React Excel viewer, is used for organizing and analyzing data in tabular format like Microsoft Excel for web program. |
GRIDS - Tree Grid
|
The React TreeGrid is used to visualize self-referential, hierarchical data effectively in a tabular format (a tree-like structure). |
INPUTS - Checkbox
|
The React Checkbox is a custom checkbox-type Hypertext Markup Language 5 (HTML5) input component for selecting one or more options from a list of predefined choices. |
INPUTS - Color Picker
|
The React Color Picker component allows the user to pick colors either by selecting from the color picker container or by adjusting the hue and opacity. |
INPUTS - File Upload
|
The React File Upload is a component for uploading one or multiple files, images, documents, audio, video, and other files to a server. |
INPUTS - Input Mask
|
The React Input Mask or masked textbox is a component that provides an easy and reliable way to collect user input based on a standard mask. |
INPUTS - Numeric Textbox
|
The React Numeric Textbox component is a component used to get number inputs from users. |
INPUTS - Radio Button
|
The React Radio Button is a custom radio-type Hypertext Markup Language 5 (HTML5) input component for selecting one option from a list of predefined choices. |
INPUTS - Signature
|
The React Signature Pad is a graphical interface that allows users to draw smooth signatures as vector outline strokes using variable-width Bezier curve interpolation. |
INPUTS - Slider
|
The React Range Slider is a custom range-type Hypertext Markup Language 5 (HTML5) input component. It allows the user to select a value or range of values between a specified minimum and maximum. |
INPUTS - TextBox
|
The React TextBox (text field) is a component for editing, displaying, or entering plain text on forms to capture user names, phone numbers, and email. This component is an extended version of the Hypertext Markup Language 5 (HTML5) TextBox (input type text) component with icons, floating labels, different sizing, grouping, and validation states. |
INPUTS - Toggle Switch Button
|
The React Toggle Switch Button component is a custom Hypertext Markup Language 5 (HTML5) input-type checkbox component that allows the user to perform a toggle (on/off) action between checked and unchecked states. |
LAYOUT - Avatar
|
React Avatar is a Cascading Style Sheets (CSS) component used to add initials, icons, or images representing people or objects in different shapes and sizes. The Avatar control can integrate with ListView, Badge, Card, and other container components. |
LAYOUT - Card
|
React Card is a container-based user interface (UI) component built using Hypertext Markup Language 5 (HTML5)/Cascading Style Sheets 3 (CSS3) markup and styles for displaying organized content. |
LAYOUT - Dashboard Layout
|
React Dashboard Layout is a grid-structured layout component that helps create static and dynamic dashboard layouts with panels. |
LAYOUT - Dialog
|
The React Dialog is a useful user interface (UI) component for informing users about critical information, errors, warnings, and questions, as well as confirming decisions and collecting input from users. |
LAYOUT - ListView
|
The React ListView component is a list-like interface that allows the user to select an item or multiple items. |
LAYOUT - Splitter
|
The React Splitter is a layout user interface (UI) that provides resizable, expandable, collapsible, and nestable panes. |
LAYOUT - Tooltip
|
The React Tooltip component is a pop-up that shows information or a message when users hover, click, focus, or touch an image, button, and anchor tag. |
NAVIGATION - Accordion
|
The React Accordion is a container-based component with vertically collapsible panels (vertical accordion) and stacked headers that expand or collapse one or more panels at a time within the available space. |
NAVIGATION - AppBar
|
The React AppBar also known as action bar or nav bar displays information and actions related to the current program screen. |
NAVIGATION - Breadcrumb
|
The React Breadcrumb is a graphical user interface that serves as a navigation header for the user`s web program or site. |
NAVIGATION - Carousel
|
The React Carousel component allows users to display images with content and links like a slide show. |
NAVIGATION - Context Menu
|
The React Context Menu or right-click menu is a graphical user interface component that appears when the user right-clicks or performs a touch and hold action. |
NAVIGATION - File Manager
|
The React File Manager (File explorer) is a graphical user interface component for managing the file system that allows users to perform most common file operations like accessing, editing, and sorting files or folders. |
NAVIGATION - Menu Bar
|
The React Menu Bar is a graphical user interface component that serves as a navigation header for the user`s web program or site. |
NAVIGATION - Sidebar
|
The React Sidebar component is an expandable container area that holds primary and secondary information placed alongside the main content of a webpage. |
NAVIGATION - Tabs
|
The React Tabs component is a user interface (tabs UI) for organizing related content and occupying space. |
NAVIGATION - Toolbar
|
The React Toolbar is a component that provides an interface for selecting a command from a selection of commands. |
NAVIGATION - TreeView
|
The React Tree View is a graphical user interface component that to represents hierarchical data in a tree structure. |
NOTIFICATIONS - Badge
|
The Badge is a Cascading Style Sheets (CSS) component used to add notifications, messages, or statuses in different shapes and sizes. The Badge component can be easily integrated with ListView, Avatar, and other container controls. |
NOTIFICATIONS - Message
|
The React Message is a graphical user interface for displaying messages with visual severity levels. |
NOTIFICATIONS - Progress Bar
|
The React Progress Bar is a control that indicates the progress of a task with customizable visuals. |
NOTIFICATIONS - Skeleton
|
The React Skeleton is a placeholder that animates a shimmer effect to let users know that the page`s content is currently loading. |
NOTIFICATIONS - Toast
|
The React Toast or Toasty is a small, nonblocking notification pop-up. A toast is shown to users with readable message content at the bottom of the screen or at a specific target and disappears automatically after a few seconds (time-out) with different animation effects. |