Component catalog
Play with the real components
Every example here is the actual AWE React client. Change an attribute, watch the component and the XML that produces it.
- The real clientEach preview is the AWE React client itself, fed with sample data. No screenshots, no mock-ups.
- XML that follows youChange a control and the XML that declares it updates at once, ready to copy into your screen.
- Light and darkSwitch the colour mode of any preview and see how the component takes it, with the AWE design tokens.
- Live
Button
Launches actions: search, save, confirm. Normal, submit, reset, icon-only.
Forms<button> - Live
Criteria
The inputs of a form: the attributes they share and a guide to every type.
Forms<criteria> - Live
Text inputs
Text, password, text area, Markdown editor, text view and color.
Forms<criteria> - Live
Numbers and dates
Numeric with a slider, date, date range, time and filtered calendar.
Forms<criteria> - Live
Selects and suggests
Select, suggest, picklist and their multiple versions.
Forms<criteria> - Live
Checkbox and radio
Radio, button radio, checkbox, switch and button checkbox.
Forms<criteria> - Live
File upload
Upload a file with a drop zone, a preview and camera capture.
Forms<criteria> - Live
Grid
Editable, sortable, paginated tables with column filters and selection.
Data<grid> - Live
Tree grid
A grid with expandable parent and child rows for hierarchical data.
Data<grid> - Live
Pivot table
Cross-tab matrices with rows, columns and aggregations.
Data<pivot-table> - Live
Chart
Bar, line, pie and more, fed by the same queries as the grids.
Charts & maps<chart> - Live
Wizard
Step-by-step flows with a progress indicator and validation per step.
Layout<wizard> - Live
Tabs and accordion
Organise dense screens into tabs or collapsible sections.
Layout<tabcontainer> - Live
Map
Interactive maps with selectable markers and routes.
Charts & maps<map> - Live
File viewer
Show text files and PDF documents next to your data.
Media<widget> - Live
Card
Group related content in a titled, optionally collapsible surface.
Layout<card> - Live
Dialog
Modal windows for confirmations and focused tasks.
Layout<dialog> - Live
Side panel and popover
Panels on the edge of the screen and popovers next to a control, without leaving the screen.
Layout<side-panel> - Live
Context menu
Right-click menus with icons, separators, submenus and any action.
Layout<context-button> - Live
Messages and info
Confirm dialogs, toasts and messages over a field, plus the info controls of the header.
Layout<message> - Live
Window and layout
Windows, resizable panels and the screen template with its breadcrumb.
Layout<window> - Live
Tags and lists
Section titles, plain text and a tag generated for each row of a query.
Layout<tag> - Live
Media and content
Avatars, videos with a poster, images and links.
Media<avatar> - Live
Widgets
A carousel of images and videos, and the help viewer of the application.
Media<widget>
24 components