Components
Every page, whether it is written in YAML, built fluently in code or derived from a class, is a
tree of components from one catalogue. In YAML the type: of a node is the component’s name;
in Java the same name is a record in io.mateu.uidl.data with a builder; C# and Python have the
same names. The catalogue’s JSON Schema, specs-schema.json, is generated from those records, so
the schema, the visual editor’s palette and the renderers cannot disagree.
This page lists the catalogue by role, one line per component, with a link to its page where
there is one. Annotated view models produce the same components: a field becomes a FormField, a
List<Row> a grid, a @Section a card, a @Button method a Button.
Layout
Section titled “Layout”Containers that arrange other components.
| Component | What it is for |
|---|---|
VerticalLayout / HorizontalLayout | stack children down or across; the everyday containers |
FormLayout | responsive columns of fields (FormRow, FormItem, FormSection, FormSubSection structure it) |
ContentLayout | the content-page grammar: a main region, an aside (side, width, sticky) and a full-width footer |
Card | a framed group with a title; what a @Section becomes |
TabLayout / AccordionLayout / Details | groups the user switches between, or expands |
SplitLayout / MasterDetailLayout | two resizable panes; a list with its detail |
DashboardLayout + DashboardPanel | a responsive grid of titled tiles (dashboard) |
FoldoutLayout + FoldoutPanel | an overview with lateral fold-out panels (foldout) |
HeroSection | a large title band with optional image and calls to action (welcome page) |
BoardLayout, ResponsiveGrid | rows and columns of tiles |
CarouselLayout, Scroller, Container, FullWidth, Div | carousels, scroll areas, plain wrappers |
Fields and input
Section titled “Fields and input”| Component | What it is for |
|---|---|
Form | a page or region with a header, fields and buttons |
FormField | one input, bound to state.<id>; its data type and stereotype pick the widget (see below) |
CustomField | a field whose value is a component, so any component can sit in a form row |
Button / ButtonGroup | run an action, navigate, or open a menu |
DropZone | a target that rows can be dragged onto (drag to a destination) |
AddOnPicker, PaymentPicker, ResourceGrid | task-specific pickers (add-on picker, payment picker, resource grid) |
MessageInput | a chat-style input (AI chat) |
Display
Section titled “Display”Read-only presentation of values and records.
| Component | What it is for |
|---|---|
Text, Markdown, Image, Icon | text in five sizes, formatted text, pictures and icons |
Avatar, AvatarGroup, Badge | people and status chips |
EntityHeader | a record’s banner: title, badges, facts, a metric (entity header) |
KPI, MetricCard, Scoreboard, Stat | key numbers, alone or as a band (stat) |
Meter, TaskProgress | a value against a limit; done/total progress (meter, task progress) |
BulletedList, StatusList, Checklist, Separator | lists of items, of statuses, of tasks; a divider (status list, checklist) |
Timeline, CommentThread, FileList | activity, conversation, attachments (timeline, comment thread, file list) |
Ledger, ProcessMonitor, RecordMerge | a folio breakdown, process health, merging two records (ledger, process monitor, record merge) |
CalloutCard, OfferCard, ComparisonCard, PricingTable, FeatureGrid, Testimonials, Faq | marketing-style and landing blocks (callout card, offer card, comparison card, pricing table, feature grid, testimonials, FAQ) |
OrgChart | a hierarchy of people or units (org chart) |
Data and collections
Section titled “Data and collections”| Component | What it is for |
|---|---|
Listing + GridColumn | the searchable, filterable, paginated collection: table, list, cards, tree or master-detail (filters and listing) |
Grid, GridGroupColumn | a plain or editable table, with grouped headers (editable table) |
VirtualList | a long, lazily rendered list |
TaskQueue | counted buckets of actionable cards (task queue) |
Kanban | cards in columns (kanban) |
Calendar | month, week, day and list views of events (calendar) |
MatrixGrid | rows × dates with collapsible sections and in-place editing (matrix grid) |
PlanningBoard | resources × days tape chart, drag to move (planning board) |
Gantt | tasks on a timeline (Gantt) |
Navigation
Section titled “Navigation”| Component | What it is for |
|---|---|
Menu entries: RouteLink, RuleLink, Menu, RemoteMenu | the app menu; see navigation and menus |
MenuBar, ContextMenu | a bar of menus; a menu on right-click (or left-click) around another component |
Directory | a categorised directory of links, for landing pages |
Breadcrumbs, Anchor, Tab | where you are; a link; one tab of a TabLayout |
ProgressSteps | where you are in a process (progress steps) |
Feedback
Section titled “Feedback”| Component | What it is for |
|---|---|
Notice | an inline message strip inside the body, with an optional action (notice) |
Notification | a toast (actions usually return a Message instead) |
ProgressBar | progress of a step or a job |
EmptyState, Skeleton | nothing to show yet; still loading (empty states and skeletons) |
NotFound | a route that does not exist (not found) |
Tooltip, CookieConsent | hints; the consent banner |
Page banners are page metadata rather than components; see page anatomy.
Overlays
Section titled “Overlays”| Component | What it is for |
|---|---|
Dialog, ConfirmDialog | a modal question; a confirmation |
Drawer | a side or bottom panel over the page (drawer) |
Popover | details on hover or click (hover details) |
ActionPanel | a categorised “I want to…” overlay (action panel) |
Charts and specialised canvases
Section titled “Charts and specialised canvases”| Component | What it is for |
|---|---|
Chart, TrendChart, Funnel, Heatmap | bar, line, pie and friends; a dependency-free trend line; a funnel; a calendar heatmap (trend chart, funnel, heatmap) |
Map | a street map with clickable markers |
Bpmn, Workflow | a BPMN diagram; a workflow-definition editor |
Chat, MessageList | a conversation (AI chat) |
Composition and extension
Section titled “Composition and extension”These carry no look of their own; they assemble or delegate.
| Component | What it is for |
|---|---|
Partial | a named piece of layout spliced in by reference (partials) |
ComponentRef | a named business component bound to a data source (business components) |
CustomComponent | a rendering the catalogue does not have, registered per renderer (custom components) |
Element | any HTML element or web component by tag name (custom web components) |
MicroFrontend, EmbeddedView | another Mateu UI, or another view, embedded as an island |
FutureComponent, Slotted | a component that arrives later; a child placed in a named slot |
State, AppState, Data, AppData | not visual: values an action returns to update a state scope |
The full, always-current list is the generated schema,
specs-schema.json.
Fields and field types
Section titled “Fields and field types”A FormField (or an annotated field) is drawn according to two properties:
dataType: what the value is:string,integer,number,bool,date,time,dateTime,dateRange,money,status,file,array,range,component,menu,action,actionGroup.stereotype: how to edit or show it:regular,textarea,richText,html,markdown,email,password,select,combobox,listBox,radio,checkbox,toggle,multiSelect,treeSelect,choice,searchable,slider,stars,color,icon,link,money,badge,plainText,bulletedList,grid,image,uploadableImage,fileUpload,signature,camera,dateRange,numberRange,popover,button,primary.
In code, both are inferred from the Java, C# or Python type (a LocalDate is a date picker, a
small enum is a radio group, a List<Row> is a grid) and overridden with @Stereotype or a
shorthand annotation (@Badge, @UploadableImage, @Signature, @TreeSelect…). See
field stereotypes and
field annotations.
To name a domain concept once (OrderStatus, Money, Email) and reuse it on every field
and column, declare a field type in types.yaml
(fieldType: OrderStatus) or, for annotated classes, a
semantic annotation.
How renderers map components
Section titled “How renderers map components”A component on the wire says what to show; each renderer decides how, with its own widgets:
| Renderer | Paints components with | Details |
|---|---|---|
| Vaadin (web) | Vaadin web components, plus Mateu’s own design-neutral elements for the rest | Vaadin |
| Redwood (web) | Oracle JET and Redwood components, inside a Visual Builder app | Redwood, Redwood coverage |
| React Native (mobile) | native views | The Mateu app |
| IntelliJ (desktop) | Swing components in tool windows and editor tabs | IntelliJ |
A renderer that has no view for a component shows a visible unsupported placeholder instead of silently dropping it, which is what the conformance suite counts. What a renderer must implement, and the Core / Standard / Full conformance levels, are in the renderer contract. Which feature works where is in the parity matrix.