Component reference

Detailed reference for every fluent component available in Mateu.

Each page covers what the component does, its properties, and a working code example drawn from the demo application.

---

Layout and structure

Component	Description
VerticalLayout	Stacks children vertically
HorizontalLayout	Arranges children side by side
FormLayout	Multi-column responsive form grid
SplitLayout	Two-panel split view
AccordionLayout	Collapsible accordion panels
TabLayout	Tabbed interface
BoardLayout	Flexible board with rows and items
CarouselLayout	Slide carousel
MasterDetailLayout	Side-by-side master and detail
Scroller	Scrollable container
Container	Centred, width-constrained wrapper
FullWidth	Full-width wrapper

Forms and inputs

Component	Description
Form	High-level form with title, toolbar, content and buttons
FormField	Individual typed input field
Button	Clickable action button

Data display

Component	Description
Grid	Paginated data table
Card	Content card with media, title and variants
Badge	Small inline status label
Avatar	User avatar with initials or image
AvatarGroup	Stacked group of avatars
Chart	Chart.js-powered chart
Details	Expand/collapse summary block
KPI	Key performance indicator tile
Text	Styled text block
Markdown	Rendered Markdown content
Image	Image from URL or data URI
VirtualList	Virtualised paginated list
Directory	Nested menu directory

Navigation

Component	Description
Anchor	Hyperlink
Breadcrumbs	Breadcrumb trail
Icon	Icon from the built-in icon set

Feedback and overlays

Component	Description
Dialog	Modal dialog
ConfirmDialog	Confirmation prompt
Notification	Toast notification
Tooltip	Hover tooltip
Popover	Click-triggered popover
ProgressBar	Indeterminate or determinate progress bar
CookieConsent	Cookie consent banner

Specialised

Component	Description
Map	Embedded map
MicroFrontend	Remote micro-frontend embed
Element	Raw HTML element
TreeGrid	Hierarchical tree grid