Momah UI Components
Welcome to the Momah UI Components documentation. Momah Components is a production-grade library of enterprise UI components engineered specifically for ASP.NET MVC and ASP.NET Core applications.
Key Features
- ⚡ ASP.NET MVC Native: Direct Razor
@Html.Momah()HtmlHelpers and<momah-*>TagHelpers with strong C# ViewModel lambda bindings.
Component Architecture & Structure
Every component is self-contained and offers unified client/server interaction:
- Razor Markup (
_*.cshtml): Clean, accessible markup rendered directly by ASP.NET View Engine. - C# Helper API: Fluent builder syntax for ViewModel property binding, validation rules, and configuration hooks.
- Styles & Scripts: Modular CSS variables and zero-dependency Vanilla JS event handling.
Component Library Overview
📝 Form Controls
High-performance inputs built for data entry, validation, and complex user selection.
| Component | Description | Status |
|---|---|---|
| DualDate | Dual Hijri & Gregorian date selector with custom date constraints. | NEW |
| DateInput | Standard single date picker with culture formatting. | STABLE |
| DateRange | Preset range date selector (Today, Last 7 Days, Month to Date). | STABLE |
| InputField | Formatted text input with icon slots and validation state. | STABLE |
| SelectInput | Searchable dropdown selector with option grouping. | STABLE |
| MomahSelect | Custom styled select control with dynamic AJAX data loading. | STABLE |
| FileUpload | Drag-and-drop file uploader with progress tracking. | STABLE |
| AttachBox | Compact file attachment container widget. | STABLE |
| TextArea | Multi-line text input with auto-height and character counter. | STABLE |
| CkEditor | Rich text WYSIWYG editor wrapper for Razor views. | STABLE |
📊 Data Display
Components designed for rendering structured server data cleanly.
| Component | Description | Status |
|---|---|---|
| MomahTable | Server-side datagrid with sorting, filtering, and pagination. | UPDATED |
| Badge | Status tag and category badge component. | STABLE |
| AttachmentCard | Document preview card with download and deletion actions. | STABLE |
💬 Overlays & Feedback
Popovers, alerts, and modal dialogs for contextual user interaction.
| Component | Description | Status |
|---|---|---|
| Tooltip | Contextual popover tooltip with smooth micro-animations. | STABLE |
| LabelTip | Inline form label hint helper icon. | STABLE |
| Banner | Full-width system notification alert banner. | STABLE |
| Notification | Toast notification manager engine. | STABLE |
| StatusModal | State feedback modal dialog with custom action buttons. | STABLE |
🧩 Navigation
| Component | Description | Status |
|---|---|---|
| Breadcrumb | Semantic breadcrumb trail component. | STABLE |
Quick Example
Render a component inside any Razor View (.cshtml):
@model UserProfileViewModel
<!-- DualDate Picker Example -->
@Html.Momah().DualDateFor(m => m.BirthDate)
.SetLabel("Date of Birth")
.SetMode(DualDateMode.HijriGregorian)
.SetRtl(true)
.Render()
Explore components from the Components category in the left sidebar or browse the Components Gallery!