BlazorUI Demo

Wireframes and layouts

Composable starting points for common application screens, built entirely from BlazorUI components.

Dashboard shell

App bar, responsive grid and metric cards form a compact operational dashboard.

Operations

Orders

1,284

+12%

Customers

842

+8%

Reviews

31

Needs attention
Recent activity
View code 
<BuiSurface Flush>
    <BuiAppBar Sticky="false" Color="Palette.Teal"><StartContent><BuiIcon Icon="LucideIcons.LayoutDashboard" /></StartContent><ChildContent><BuiText Typo="Typo.H5">Operations</BuiText></ChildContent><Actions><BuiIconButton Icon="LucideIcons.Bell" AriaLabel="Notifications" /><BuiAvatar Name="Ada Lovelace" Size="Size.Small" /></Actions></BuiAppBar>
    <BuiStack Gap="4" Class="p-4">
        <BuiGrid Columns="12" Gap="3">
            <BuiGridItem Xs="12" Md="4"><BuiCard Color="Palette.Teal"><BuiText Color="Colors.Secondary">Orders</BuiText><BuiText Typo="Typo.H3">1,284</BuiText><BuiBadge Color="Colors.Success">+12%</BuiBadge></BuiCard></BuiGridItem>
            <BuiGridItem Xs="12" Md="4"><BuiCard Color="Palette.Violet"><BuiText Color="Colors.Secondary">Customers</BuiText><BuiText Typo="Typo.H3">842</BuiText><BuiBadge Color="Colors.Success">+8%</BuiBadge></BuiCard></BuiGridItem>
            <BuiGridItem Xs="12" Md="4"><BuiCard Color="Palette.Orange"><BuiText Color="Colors.Secondary">Reviews</BuiText><BuiText Typo="Typo.H3">31</BuiText><BuiBadge Color="Colors.Warning">Needs attention</BuiBadge></BuiCard></BuiGridItem>
        </BuiGrid>
        <BuiCard><BuiText Typo="Typo.H5" GutterBottom>Recent activity</BuiText><BuiSkeleton Layout="dashboardSkeleton" /></BuiCard>
    </BuiStack>
</BuiSurface>

@code {
    private readonly IReadOnlyList<SkeletonSection> dashboardSkeleton = [SkeletonSection.Text(4)];
}
Detail and edit screen

A breadcrumb, restrained form width and separated actions create a reliable CRUD layout.

Edit customer

View code 
<BuiContainer Width="ContainerWidth.Medium">
    <BuiStack Gap="4">
        <BuiBreadcrumbs><BuiBreadcrumbItem Href="/">Home</BuiBreadcrumbItem><BuiBreadcrumbItem Href="/data-grid">Customers</BuiBreadcrumbItem><BuiBreadcrumbItem>Edit</BuiBreadcrumbItem></BuiBreadcrumbs>
        <BuiCard><Header><BuiText Typo="Typo.H4">Edit customer</BuiText></Header><ChildContent>
            <EditForm Model="customer" FormName="wireframe-customer"><BuiStack Gap="3"><BuiTextField @bind-Value="customer.Name" Label="Name" /><BuiTextField @bind-Value="customer.Email" Label="Email" Type="TextInputType.Email" /><BuiBooleanField TValue="bool" @bind-Value="customer.Active" Label="Active" /></BuiStack></EditForm>
        </ChildContent><Footer><BuiButton Variant="Variant.Text">Cancel</BuiButton><BuiButton Color="Colors.Success">Save customer</BuiButton></Footer></BuiCard>
    </BuiStack>
</BuiContainer>

@code {
    private CustomerForm customer = new() { Name = "Ada Lovelace", Email = "ada@example.com", Active = true };
    private sealed class CustomerForm { public string? Name { get; set; } public string? Email { get; set; } public bool Active { get; set; } }
}
Master-detail workspace

Customer 1

Select a record on the left to update this detail pane.

Profile content
View code 
<BuiGrid Columns="12" Gap="3">
    <BuiGridItem Xs="12" Md="4"><BuiCard Flush><BuiList TValue="int" Selectable @bind-Value="selectedCustomer" Dividers><BuiListItem Value="1" StartIcon="LucideIcons.User">Ada Lovelace</BuiListItem><BuiListItem Value="2" StartIcon="LucideIcons.User">Grace Hopper</BuiListItem></BuiList></BuiCard></BuiGridItem>
    <BuiGridItem Xs="12" Md="8"><BuiCard><BuiText Typo="Typo.H4">Customer @selectedCustomer</BuiText><BuiText Color="Colors.Secondary">Select a record on the left to update this detail pane.</BuiText><BuiDivider /><BuiTabs DefaultValue="profile"><BuiTabList AriaLabel="Customer detail sections"><BuiTab Value="profile">Profile</BuiTab><BuiTab Value="activity">Activity</BuiTab></BuiTabList><BuiTabPanel Value="profile">Profile content</BuiTabPanel><BuiTabPanel Value="activity">Activity content</BuiTabPanel></BuiTabs></BuiCard></BuiGridItem>
</BuiGrid>

@code {
    private int selectedCustomer = 1;
}