How to Use
Getting Started
Write any Marai.UI component markup in the editor below:
- Write Razor markup using components like
<MButton>,<MBadge>,<MCard> - Use
Variant="Variant.Primary"andSize="Size.Default"for semantic styling - Click Preview to render your code
- Use the Quick Examples below to load pre-built snippets
Note: Only markup is supported. C# code blocks and event handlers are not executed.
Live Preview
Preview mode:
light
Preview
No preview yet
Write some markup below and click Preview
Code Editor
Quick Examples
Click any example to load it into the editor.
Button Variants
All semantic variants: Primary, Outline, Destructive, Ghost
Status Badges
Merchant status: Active, Pending, Suspended, Review
Settlement Card
Production card with header, content, and action footer
Button Sizes
Xs through Xl: all available size presets
Loading States
Loading button + spinner variants
Dashboard KPI Row
KPI cards: Total Revenue, Active Merchants, Pending Settlements