Pre-Defined Styles (Removed)

Breaking Change — v1.0.0-Alpha.6

PreDef has been completely removed from MaraiUIOptions. The PreDefClass type, the PreDefName parameter on components, and the options.PreDef configuration block no longer exist.

Any code that references PreDefClass, options.PreDef, or PreDefName="..." will produce a compile error. Follow the migration guide below.

Migration Guide

Remove PreDef from Program.cs

Before:

csharp

builder.Services.AddMaraiUI(options =>
{
    options.Colors.Primary = "#6f42c1";
    options.PreDef.PreDefConfigurations = new List<PreDefClass>
    {
        new PreDefClass { ClassName = "PrimaryButton", Color = Variant.Primary, Size = Size.Lg },
        new PreDefClass { ClassName = "DangerButton", Color = Variant.Destructive, Size = Size.Default }
    };
});

After:

csharp

builder.Services.AddMaraiUI(options =>
{
    options.Colors.Primary = "#6f42c1";
    // No PreDef — removed in v1.0.0-Alpha.6
});

Remove PreDefName from Components

Replace PreDefName="..." with explicit Variant and Size parameters, or use the Class parameter for one-off Tailwind overrides.

Before:

razor

<MButton PreDefName="PrimaryButton">Save</MButton>
<MButton PreDefName="DangerButton">Delete</MButton>

After (using Variant/Size):

razor

<MButton Variant="Variant.Default" Size="Size.Lg">Save</MButton>
<MButton Variant="Variant.Destructive">Delete</MButton>

After (using Class for a one-off override):

razor

<MButton Class="rounded-full px-8 shadow-md">Save</MButton>
<MButton Variant="Variant.Destructive" Class="shadow-lg">Delete</MButton>

Recommended Alternatives

Replacement Strategies

Variant + Size parameters — use Variant="Variant.Destructive", Variant="Variant.Success", Size="Size.Lg" etc. for component-level intent. These are the primary customization API.
Class parameter — pass Tailwind utilities for one-off shape, spacing, or layout tweaks. User-supplied classes always win conflicts.
CSS token overrides — override --marai-primary, --marai-radius, and other semantic tokens in your app stylesheet for global brand theming. One token change updates buttons, badges, switches, and focus rings simultaneously.
Wrapper Razor component — create a project-specific wrapper (e.g. AppSaveButton.razor) that pre-sets Variant, Size, and Class defaults. This is the equivalent of a named PreDef config without library coupling.

Wrapper Component Pattern

If you had named presets like PreDefName="PrimaryButton", create a thin wrapper component in your consuming project instead:

razor

@* AppPrimaryButton.razor — in your consuming project *@
<MButton Variant="Variant.Default" Size="Size.Lg" Class="rounded-full px-8 shadow-md @Class">
    @ChildContent
</MButton>

@code {
    [Parameter] public RenderFragment? ChildContent { get; set; }
    [Parameter] public string? Class { get; set; }
}

Then use it anywhere in your app:

razor

<AppPrimaryButton>Save Changes</AppPrimaryButton>

Next Steps

Theming — CSS token overrides for global brand customization
Button — Variant and Size parameters
All Components — explore the full component library