abp-blazor

Provide reusable base classes and UI patterns for ABP Blazor components.

1|Updated Mar 20, 2026

Search Tags:#ui-patterns #blazor #abp #data-grid #component-base #crud-page

Ready to run

npx skills add https://github.com/afonsoft/VideoChat --skill abp-blazor-afonsoft

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: abp-blazor
Source: https://github.com/afonsoft/VideoChat/tree/main/.agents/skills/abp-blazor
Command: npx skills add https://github.com/afonsoft/VideoChat --skill abp-blazor-afonsoft

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

ABP Blazor UI development often requires boilerplate code and inconsistent patterns. This Skill provides reusable base classes and UI patterns (AbpComponentBase, AbpCrudPageBase, DataGrid, IMenuContributor, Message/Notify, Validations, JavaScript interop) to standardize UI development and accelerate delivery.

Core Features & Use Cases

Reusable base components: AbpComponentBase, AbpCrudPageBase, and DataGrid integration for rapid CRUD pages.
UI composition: Consistent navigation, localization, notifications, and JS interop patterns across Blazor apps.
Use Case: When building an ABP Blazor Server or WebAssembly UI, reuse patterns to implement CRUD, grids, and interop with minimal boilerplate.

Quick Start

Extend AbpComponentBase to build a basic component and scaffold a CRUD page using AbpCrudPageBase.

Frequently Asked Questions about abp-blazor

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I reduce boilerplate code when building ABP Blazor UI components?▼

Reduce ABP Blazor UI boilerplate by extending reusable base classes like AbpComponentBase and AbpCrudPageBase. These base classes provide standardized component design, code reuse, and predictable behavior for rapid UI construction without repetitive setup.

What is the best way to scaffold a CRUD page in ABP Blazor?▼

The best way to scaffold a CRUD page in ABP Blazor is using AbpCrudPageBase combined with DataGrid integration. This approach provides rapid, consistent CRUD page construction with built-in data grid functionality and standardized UI patterns.

Can I use these ABP Blazor UI patterns with both Blazor Server and WebAssembly?▼

Yes, these ABP Blazor UI patterns are fully applicable to both Blazor Server and WebAssembly projects. The reusable base classes and UI patterns support standardized component design across both hosting models within the ABP framework.

How do I handle JavaScript interop and localization in an ABP Blazor app?▼

Handle JavaScript interop and localization in ABP Blazor by applying the standardized UI patterns provided with this Skill. These patterns ensure consistent navigation, notifications, and JS interop implementation across your application components.

Do I need specific ABP Blazor packages to implement consistent UI patterns?▼

Yes, implementing these consistent UI patterns requires ABP Blazor packages such as AbpComponentBase, AbpCrudPageBase, and DataGrid. These dependencies enable standardized CRUD pages, data grids, and component construction within the ABP framework.