---

name: abp-ui description: "ABP Framework v10.x (10.4/10.5) UI: MVC/Razor Pages (AbpPageModel), Blazor (AbpComponentBase), Angular, React (--modern), theming (LeptonX), menu contributor, dynamic proxy. Use when developing frontend, UI, pages, or components in ABP."

ABP Framework — UI & Frontend

ABP Framework v10.x (10.4/10.5) UI framework integrations. MVC, Blazor, Angular, React, theming.

Trigger

• "ABP UI"
• "ABP MVC"
• "ABP Blazor"
• "ABP Angular"
• "ABP React"
• "ABP theme"

UI Frameworks

Framework	Type	Note
MVC/Razor Pages	Server-side	Default
Blazor Web App	Server-side (.NET 10)	Modern Blazor
Blazor WASM	Client-side	SPA
Angular	Client-side	TypeScript
React	Client-side	Modern template

MVC Controller

[Area("App")]
[Route("api/app/book")]
public class BookController : AbpController
{
    private readonly IBookAppService _bookAppService;
    public BookController(IBookAppService bookAppService) => _bookAppService = bookAppService;
    
    [HttpGet]
    public Task<PagedResultDto<BookDto>> GetListAsync(PagedAndSortedResultRequestDto input) =>
        _bookAppService.GetListAsync(input);
}

Razor Page

public class IndexModel : AbpPageModel
{
    public List<BookDto> Books { get; set; }
    public IndexModel(IBookAppService bookAppService) => _bookAppService = bookAppService;
    
    public async Task OnGetAsync()
    {
        var result = await _bookAppService.GetListAsync(new());
        Books = result.Items;
    }
}

Blazor Component

@page "/books"
@inject IBookAppService BookAppService

@if (books == null) { <p>Loading...</p> }
else {
    @foreach (var book in books.Items)
    {
        <div>@book.Name - @book.Price</div>
    }
}

@code {
    private PagedResultDto<BookDto> books;
    protected override async Task OnInitializedAsync() =>
        books = await BookAppService.GetListAsync(new());
}

React (Modern)

abp new Acme.BookStore --template app --modern
abp new Acme.BookStore --modern --shadcn-theme blue

Theme: slate, pink, blue, turquoise, orange, purple

Theming

abp new Acme.BookStore --theme leptonx-lite
abp new Acme.BookStore --theme basic

Permission

public static class BookStorePermissions
{
    public const string GroupName = "BookStore";
    public const string Books = GroupName + ".Books";
    public const string BooksCreate = Books + ".Create";
}

Best Practices

1. MVC/Razor Pages as the default choice
2. Use Blazor Web App (.NET 10)
3. Use the --modern flag for React
4. Define permissions in a constant class

v10.5+

• Blazorise upgraded to 2.2.1; CMS Kit editor uses CodeMirror 6.0.2. Align direct pins and re-test custom Blazor components / editor pages.

Related

API · Authorization · Localization · Framework · Docs: https://abp.io/docs/latest/framework/ui