metabuilder/qml

QML Component Library

Material Design 3 components for Qt6 desktop applications. These components mirror the React/TypeScript FakeMUI library, providing consistent UI across web and desktop platforms.

Structure

qml/
├── qmldir                    # Main module definition (119 components)
├── components/               # Core component library (104 components)
│   ├── atoms/               # Basic building blocks (14)
│   ├── core/                # Buttons, Cards, Icons (9)
│   ├── data-display/        # Tables, Lists, Badges (8)
│   ├── feedback/            # Alerts, Dialogs, Progress (9)
│   ├── form/                # Inputs, Checkboxes, Selects (17)
│   ├── lab/                 # Experimental components (9)
│   ├── layout/              # Grid, Flex, Stack (10)
│   ├── navigation/          # Tabs, Menus, Breadcrumbs (10)
│   ├── surfaces/            # AppBar, Drawer, Paper (5)
│   ├── theming/             # Theme providers (2)
│   └── utils/               # Utilities (11)
├── hybrid/                   # Complete application views (7)
│   ├── qmldir               # Hybrid module definition
│   ├── TaskList.qml
│   ├── TaskDetail.qml
│   ├── NewPrompt.qml
│   ├── UserInfo.qml
│   ├── SearchDialog.qml
│   ├── Documentation.qml
│   └── MarkdownRenderer.qml
└── widgets/                  # Specialized desktop widgets (8)
    ├── AjaxQueueWidget.qml
    ├── DetailPane.qml
    ├── LanguageSelector.qml
    ├── NerdPanel.qml
    ├── PatchDialog.qml
    ├── SendPromptDialog.qml
    ├── TaskListItem.qml
    └── ThemeSelector.qml

Usage

Import the Module

Add the qml folder to your QML import path, then import the module:

import QmlComponents 1.0

ApplicationWindow {
    CButton {
        text: "Click Me"
        variant: "contained"
        onClicked: console.log("Clicked!")
    }
}

CMake Integration

set(QML_IMPORT_PATH "${CMAKE_SOURCE_DIR}/qml" CACHE PATH "QML import path")

qmake Integration

QML_IMPORT_PATH += $$PWD/qml

Component Categories

Core Components

• CButton - Material buttons with variants (text, outlined, contained)
• CCard - Elevated card containers
• CChip - Compact elements for tags, filters
• CIcon - Material Design icons
• CIconButton - Icon-only buttons
• CFab - Floating action buttons
• CToolbar - Application toolbars
• CListItem - List item containers
• CLoadingOverlay - Loading state overlays

Form Components

• CTextField - Text input with labels and validation
• CCheckbox / CRadio / CSwitch - Toggle controls
• CSelect - Dropdown selection
• CSlider - Range selection
• CAutocomplete - Search with suggestions
• CRating - Star ratings
• CTextarea - Multi-line text input

Layout Components

• CGrid / CGridItem - CSS Grid-like layouts
• CFlex / FlexRow / FlexCol - Flexbox layouts
• CStack - Vertical/horizontal stacking
• CContainer - Responsive containers
• CBox - Generic container
• Spacer - Flexible spacing

Data Display

• CTable - Data tables
• CList - Vertical lists
• CAvatar / CBadge - User avatars with badges
• CDivider - Content dividers
• CTooltip - Hover tooltips
• CStatBadge / CStatusBadge - Status indicators

Feedback

• CAlert - Alert messages
• CDialog - Modal dialogs
• CSnackbar - Toast notifications
• CProgress / CSpinner - Loading indicators
• CSkeleton - Content placeholders
• CEmptyState / CErrorState - Empty/error states

Navigation

• CTabs / CTabBar - Tab navigation
• CMenu - Dropdown menus
• CBreadcrumbs - Breadcrumb navigation
• CPagination - Page navigation
• CStepper - Step-by-step wizards
• CSidebar - Side navigation
• CDrawer - Slide-out panels
• CBottomNavigation - Mobile-style bottom nav

Surfaces

• CAppBar - Application header bar
• CDrawer - Navigation drawer
• CPaper - Elevated surface
• CAccordion / CAccordionItem - Collapsible sections

Lab (Experimental)

• CDataGrid - Advanced data grids
• CDatePicker / CTimePicker / CDateTimePicker - Date/time selection
• CTimeline / CTimelineItem - Event timelines
• CMasonry - Masonry layouts
• CTreeView - Tree navigation
• CLoadingButton - Buttons with loading state

Atoms (Building Blocks)

• CText / CTitle / CTypography - Text rendering
• CPanel / CSection - Content sections
• CMarkdown / CProse - Markdown rendering
• CCodeBlock / CCodeInline - Code display
• CHighlight / CBlockquote - Text highlights

Theming

Components use the Material Design 3 color system. The theming system is located at fakemui/theming/ and includes:

• Theme.qml - Main theme singleton
• StyleVariables.qml - CSS-like variables
• StyleMixins.qml - Reusable style functions
• Responsive.qml - Responsive breakpoints

To customize themes, modify the theme files or create a custom CThemeProvider.

Related

• React Components: fakemui/react/components/ - TypeScript/React equivalents
• SCSS Styles: fakemui/styles/ - Shared SCSS modules
• Icons: fakemui/icons/ - 421 SVG Material icons
• Qt6 Frontend: frontends/qt6/ - Qt6 desktop application using these components

Component Count

Category	Count
Atoms	14
Core	9
Data Display	8
Feedback	9
Form	17
Lab	9
Layout	10
Navigation	10
Surfaces	5
Theming	2
Utils	11
Hybrid	7
Widgets	8
Total	119