Components Overview ​
Modularous ships with 50+ Vue components covering forms, tables, modals, navigation, layouts, and more. All components live in vue/src/js/components/.
See Components Overview for how components are organized in the source tree, the input registry, and labs/experimental conventions.
Forms & Inputs ​
| Component | Purpose |
|---|---|
| Form | Root form wrapper; wires fields to schema and submit flow |
| Form Actions | Submit / cancel / custom action buttons |
| Form Summary Item | Read-only summary row for form review |
| Stepper Form | Legacy stepper form (see stepper/ for current) |
Form inputs (30+ input-* components) are documented under Form Inputs.
Tables & Data ​
| Component | Purpose |
|---|---|
| Data Tables | Primary table component — filters, sorting, pagination, actions |
| Data Iterators | Row/card iterators (RichRow, RichCard) |
| Table Binder | Binds a repository response to a table |
| Table Internals | Lower-level table primitives |
Modals ​
| Component | Purpose |
|---|---|
| Modal | Base modal wrapper |
| Dynamic Modal | Modal driven by route/payload |
| Modal Media | Media-picker modal |
| Logout Modal | Session / logout confirmation |
Navigation & Structure ​
| Component | Purpose |
|---|---|
| Tabs | Standard tabs |
| Tab Groups | Grouped tabs with shared state |
| Navigation Group | Sidebar navigation group |
| Collapsible | Collapsible wrapper |
| Expansion | Expansion panel |
Display ​
| Component | Purpose |
|---|---|
| Configurable Card | Card with slot-based sections |
| Metric | Stat/metric tile |
| Property List | Key/value list for record detail |
| List Section | Titled list block |
| Text Display | Truncation, copy-on-click, formatting |
| Title | Page/section title with actions |
| Markdown Render | Markdown → HTML renderer |
| Currency Number | Formatted currency display |
| SVG Icon | Icon renderer |
Feedback ​
| Component | Purpose |
|---|---|
| Alert | Alert banner (info, warning, error, success) |
| Error Card | Error detail card |
| Success | Success confirmation block |
Files & Media ​
| Component | Purpose |
|---|---|
| File Item | File row with actions |
| Filepond Preview | Filepond attachment preview |
| Uploader | File upload widget |
Filters & Search ​
| Component | Purpose |
|---|---|
| Filter | Filter bar |
| Dropdown Filter | Dropdown-based filter |
Actions & Utilities ​
| Component | Purpose |
|---|---|
| Btn | Button wrapper with consistent styling |
| Copy Text | Copy-to-clipboard text |
| Print Request | Print-ready request view |
| Well Print | Print wrapper block |
| Dynamic Component Renderer | Renders a component by name |
| Recursive Data Viewer | Tree/object viewer |
| Recursive Stuff | Recursive utility rendering |
Content & Messaging ​
| Component | Purpose |
|---|---|
| Blocks | Block system renderer |
| Board Information Plus | Info board card |
| Chat Message | Chat message row |
| Assignee Details | Assignee info block |
Auth ​
| Component | Purpose |
|---|---|
| Auth | Auth shell / guard wrapper |
| Impersonate Toolbar | Impersonation banner |
Payments ​
| Component | Purpose |
|---|---|
| Revolut Checkout | Revolut payment checkout integration |
Subcategories ​
| Subcategory | Description |
|---|---|
| Layouts | App layout components — Main, Sidebar, Home, Footer |
| Stepper | Stepper form components — Header, Content, Summary, Preview |
| Labs | Experimental components — may change or be removed |
| Others | Assignment modal, custom form bases, datatable legacy |
Related ​
- Form Inputs —
input-*components (date, file, price, repeater, etc.) - Module Features — traits that generate UI (files, payment, chat, etc.)
- Hydrates — backend → frontend schema transformation