DK.Blazor 1.0.9

.NET 8.0 This package targets .NET 8.0. The package is compatible with this framework or higher. 
dotnet add package DK.Blazor --version 1.0.9
                    


                    

                
NuGet\Install-Package DK.Blazor -Version 1.0.9
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package. 
<PackageReference Include="DK.Blazor" Version="1.0.9" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
<PackageVersion Include="DK.Blazor" Version="1.0.9" />
                    


                            Directory.Packages.props
                        

                    

                
<PackageReference Include="DK.Blazor" />
                    


                            Project file
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package. 
paket add DK.Blazor --version 1.0.9
                    


                    

                
#r "nuget: DK.Blazor, 1.0.9"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package. 
#:package DK.Blazor@1.0.9
#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package. 
#addin nuget:?package=DK.Blazor&version=1.0.9
                    


                            Install as a Cake Addin
                        

                    

                
#tool nuget:?package=DK.Blazor&version=1.0.9
                    


                            Install as a Cake Tool

DK.Blazor

A modern Razor Class Library component set for Blazor apps. DK.Blazor includes layout primitives, navigation, forms, display components, overlays, snackbars, dialogs, DataGrid, PivotTable, DropDownGrid, theming, and static assets packaged for NuGet.

NuGet | Repository

Package

dotnet add package DK.Blazor

Current package metadata:

Item Value
Package ID DK.Blazor
Version 1.0.9
Target frameworks net8.0, net9.0, net10.0
Static web assets _content/DK.Blazor/dk.blazor.css, _content/DK.Blazor/dk.blazor.js

Recent highlights in this package release:

  • DKTextbox now exposes a TextChanged event callback alongside ValueChanged.
  • DKButton now supports ButtonType and OnClick as parameter aliases for Type and Click.
  • DKButton parameter table added to README covering all properties including Href, Size, and Loading.
  • DKDataGrid includes border toggling, remote request handling, and row expansion/detail-row support.

Quick Start

Add the DK.Blazor stylesheet and script to your app shell.

For a Blazor Web App, update Components/App.razor:

<head>
    ...
    <link rel="stylesheet" href="@Assets["_content/DK.Blazor/dk.blazor.css"]" />
</head>
<body>
    <Routes @rendermode="InteractiveServer" />
    <script src="@Assets["_content/DK.Blazor/dk.blazor.js"]"></script>
    <script src="@Assets["_framework/blazor.web.js"]"></script>
</body>

Register snackbar services in Program.cs:

using DK.Blazor;

builder.Services.AddDKSnackbarService();

Add DK.Blazor to _Imports.razor:

@using DK.Blazor

Wrap your layout with providers:

@inherits LayoutComponentBase

<DKThemeProvider>
    <DKPopoverProvider />
    <DKDialogProvider />
    <DKSnackbarProvider />

    <DKLayout ResponsiveChanged="OnResponsiveChanged">
        <DKHeader>
            <DKStack Orientation="Orientation.Horizontal"
                     AlignItems="AlignItems.Center"
                     JustifyContent="JustifyContent.Between"
                     Gap="1rem"
                     Style="width:100%;">
                <DKStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center">
                    <DKSidebarToggle Expanded="@_leftOpen" Click="@(() => _leftOpen = !_leftOpen)" />
                    <DKLabel Text="My App" />
                </DKStack>

                <DKStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
                    <DKThemeSelector />
                    <DKProfileMenu Name="Dinesh Kumar" Subtitle="Admin" Initials="DK">
                        <DKProfileMenuItem Text="Profile" Icon="person" Href="/profile" />
                        <DKProfileMenuItem Text="Settings" Icon="settings" Href="/settings" />
                    </DKProfileMenu>
                </DKStack>
            </DKStack>
        </DKHeader>

        <DKSidebar @bind-Expanded="_leftOpen">
            <DKPanelMenu>
                <DKPanelMenuItem Text="Home" Icon="home" Href="/" />
                <DKPanelMenuItem Text="Data Grid" Icon="table" Href="/datagrid" />
                <DKPanelMenuItem Text="Forms" Icon="edit_square" Href="/forms" />
            </DKPanelMenu>
        </DKSidebar>

        <DKBody>
            <DKErrorBoundary>
                @Body
            </DKErrorBoundary>
        </DKBody>
    </DKLayout>
</DKThemeProvider>

@code {
    private bool _leftOpen = true;

    private Task OnResponsiveChanged(bool isResponsive)
    {
        if (isResponsive)
        {
            _leftOpen = false;
        }

        return Task.CompletedTask;
    }
}

Themes

DKThemeProvider controls palette, light/dark theme, and density. It persists the selected theme in browser storage through dk.blazor.js.

<DKThemeProvider Palette="default" Theme="light" Density="comfortable">
    @Body
</DKThemeProvider>

Built-in palettes:

Palette Themes
default light, dark
material light, dark
forest light, dark

Use the reusable selector:

<DKThemeProvider>
    <DKThemeSelector />
    @Body
</DKThemeProvider>

Programmatic theme control:

<DKThemeProvider @ref="_theme">
    <DKButton Text="Toggle" Click="@ToggleTheme" />
    <DKButton Text="Forest Dark" Click="@SetForestDark" />
</DKThemeProvider>

@code {
    private DKThemeProvider? _theme;

    private Task ToggleTheme() => _theme!.ToggleTheme();
    private Task SetForestDark() => _theme!.SetTheme("forest", "dark");
}

Component Index

Area Components
Theme DKThemeProvider, DKThemeSelector
Layout DKLayout, DKHeader, DKSidebar, DKSidebarToggle, DKBody, DKFooter, DKFooterSection, DKContainer, DKRow, DKColumn, DKStack, DKSpace, DKPanel
Navigation DKPanelMenu, DKPanelMenuItem, DKProfileMenu, DKProfileMenuItem, DKMenuSearch, DKPagination, DKAccordion, DKAccordionPanel, DKTab, DKTabPanel
Forms DKTextbox, DKSelect, DKAutocomplete, DKCheckBox, DKSwitch, DKRadio<TValue>, DKSlide, DKDatePicker, DKDateTimePicker, DKInputFile, DKValidationMessage<TValue>, DKLabel, DKText
Data DKDataGrid<TItem>, DKDataGridColumn<TItem>, DKPivotTable<TItem>, DKDropDownGrid<TItem,TValue>, DKDropDownGridColumn<TItem>
Display DKButton, DKIcon, DKCard, DKAvatar, DKBadge, DKImage, DKCarosel, DKLoading, DKSkeleton, DKTooltip, DKConnection
Overlays DKSnackbarProvider, IDKSnackbarService, DKSnackbar, DKDialog, DKDialogProvider, DKPopoverProvider, DKFab, DKFabMenu, DKBacktoTop, DKErrorBoundary

Layout Components

DKLayout, DKHeader, DKSidebar, DKBody

<DKLayout ShowBackToTop="true" ResponsiveChanged="OnResponsiveChanged">
    <DKHeader>
        <DKStack Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.Between" Style="width:100%;">
            <DKSidebarToggle Expanded="@_left" Click="@(() => _left = !_left)" />
            <DKThemeSelector />
        </DKStack>
    </DKHeader>

    <DKSidebar Position="SidebarPosition.Left" @bind-Expanded="_left">
        <DKPanelMenu>
            <DKPanelMenuItem Text="Home" Icon="home" Href="/" />
        </DKPanelMenu>
    </DKSidebar>

    <DKBody ShowBackToTop="true">
        Main content
    </DKBody>
</DKLayout>

@code {
    private bool _left = true;
    private Task OnResponsiveChanged(bool value) => Task.CompletedTask;
}

DKContainer, DKRow, DKColumn

<DKContainer>
    <DKRow Gap="1rem" AlignItems="AlignItems.Stretch">
        <DKColumn Span="6">
            <DKCard>Left</DKCard>
        </DKColumn>
        <DKColumn Span="6">
            <DKCard>Right</DKCard>
        </DKColumn>
    </DKRow>
</DKContainer>

DKStack and DKSpace

<DKStack Orientation="Orientation.Horizontal"
         AlignItems="AlignItems.Center"
         JustifyContent="JustifyContent.Between"
         Gap="0.75rem"
         Wrap="true">
    <DKButton Text="Save" Icon="save" />
    <DKSpace Orientation="Orientation.Horizontal" Size="1rem" />
    <DKButton Text="Cancel" Variant="DKButtonVariant.Outlined" Color="DKButtonColor.Neutral" />
</DKStack>

DKPanel

<DKPanel Title="Customer details" Raised="true">
    <p>Panel body content.</p>
    <Footer>
        <DKButton Text="Save" />
    </Footer>
</DKPanel>

DKFooter and DKFooterSection

<DKFooter Brand="DK.Blazor" Copyright="(c) 2026 DK.Blazor" Fixed="true">
    <DKFooterSection Title="Product" Expanded="true">
        <a href="/datagrid">DataGrid</a>
    </DKFooterSection>
    <DKFooterSection Title="Support">
        <a href="/docs">Docs</a>
    </DKFooterSection>
</DKFooter>

Set Fixed="true" for a sticky footer pinned to the bottom of the viewport, or Fixed="false" (or omit it) to keep the footer in normal document flow.

DKPanelMenu

<DKPanelMenu>
    <DKPanelMenuItem Text="Dashboard" Icon="dashboard" Href="/" />
    <DKPanelMenuItem Text="Data" Icon="table" Expanded="true">
        <DKPanelMenuItem Text="Grid" Icon="view_list" Href="/datagrid" />
        <DKPanelMenuItem Text="Pivot" Icon="grid_view" Href="/pivot" />
    </DKPanelMenuItem>
</DKPanelMenu>

DKProfileMenu

<DKProfileMenu Name="Dinesh Kumar" Subtitle="Workspace Admin" Initials="DK">
    <DKProfileMenuItem Text="Profile" Icon="person" Href="/profile" />
    <DKProfileMenuItem Text="Settings" Icon="settings" Href="/settings" />
    <DKProfileMenuItem Text="Sign out" Icon="logout" Danger="true" Click="@SignOut" />
</DKProfileMenu>

@code {
    private Task SignOut(MouseEventArgs _) => Task.CompletedTask;
}

DKMenuSearch

<DKMenuSearch Items="@_menuItems"
              Placeholder="Search pages..."
              SelectedItem="OnPageSelected"
              SearchTextChanged="OnSearchChanged" />

@code {
    private string[] _menuItems = ["Home", "Data Grid", "Forms", "Snackbar"];

    private Task OnPageSelected(string page) => Task.CompletedTask;
    private Task OnSearchChanged(string text) => Task.CompletedTask;
}

DKPagination

<DKPagination TotalItems="245"
              PageSize="@_pageSize"
              CurrentPage="@_page"
              CurrentPageChanged="@(p => _page = p)"
              PageSizeChanged="@(size => _pageSize = size)" />

@code {
    private int _page = 1;
    private int _pageSize = 10;
}

DKAccordion

<DKAccordion Mode="AccordionMode.Single">
    <DKAccordionPanel Title="General" Icon="settings" Expanded="true">
        General settings.
    </DKAccordionPanel>
    <DKAccordionPanel Title="Security" Icon="lock">
        Security settings.
    </DKAccordionPanel>
</DKAccordion>

DKTab

<DKTab @bind-ActiveIndex="_activeTab" TabStyle="DKTabStyle.Pills">
    <DKTabPanel Title="Overview" Icon="dashboard">
        Overview content.
    </DKTabPanel>
    <DKTabPanel Title="Activity" Icon="history">
        Activity content.
    </DKTabPanel>
</DKTab>

@code {
    private int _activeTab;
}

Form Components

DKTextbox

<DKTextbox Label="Email"
           Placeholder="name@example.com"
           LeadingIcon="mail"
           Mode="DKTextboxMode.Email"
           Required="true"
           @bind-Value="_email" />

<DKTextbox Label="Notes"
           Mode="DKTextboxMode.Textarea"
           Rows="5"
           HelperText="Internal notes only."
           @bind-Value="_notes" />

@code {
    private string _email = "";
    private string _notes = "";
}

DKSelect

<DKSelect Label="Status"
          Items="@_statuses"
          Placeholder="Choose status"
          @bind-Value="_status" />

@code {
    private string _status = "";
    private string[] _statuses = ["New", "Active", "Paused", "Closed"];
}

DKAutocomplete

<DKAutocomplete Label="Product"
                Items="@_products"
                Placeholder="Search product"
                @bind-Value="_product" />

@code {
    private string _product = "";
    private string[] _products = ["Laptop", "Monitor", "Chair", "Desk"];
}

DKCheckBox, DKSwitch, DKRadio

<DKCheckBox Text="Receive updates" @bind-Value="_updates" />
<DKSwitch Text="Enabled" @bind-Value="_enabled" />

<DKRadio TValue="string" Name="plan" Text="Basic" OptionValue="@("basic")" @bind-Value="_plan" />
<DKRadio TValue="string" Name="plan" Text="Pro" OptionValue="@("pro")" @bind-Value="_plan" />

@code {
    private bool _updates = true;
    private bool _enabled;
    private string? _plan = "basic";
}

DKSlide

<DKSlide Label="Discount"
         Min="0"
         Max="50"
         Step="5"
         Format="0'%"
         @bind-Value="_discount" />

@code {
    private double _discount = 10;
}

DKDatePicker and DKDateTimePicker

<DKDatePicker Label="Start date"
              MinDate="@DateTime.Today"
              @bind-Value="_startDate" />

<DKDateTimePicker Label="Meeting time"
                  @bind-Value="_meetingTime" />

@code {
    private DateTime? _startDate = DateTime.Today;
    private DateTime? _meetingTime = DateTime.Now;
}

DKInputFile

<DKInputFile Label="Attachments"
             Accept=".pdf,.png,.jpg"
             AllowMultiple="true"
             FilesChanged="OnFilesChanged" />

@code {
    private Task OnFilesChanged(IBrowserFile[] files) => Task.CompletedTask;
}

DKValidationMessage

<EditForm Model="@_model">
    <DKTextbox Label="Name" @bind-Value="_model.Name" Required="true" />
    <DKValidationMessage TValue="string" For="@(() => _model.Name)" StyleMode="DKValidationMessageStyle.Flat" />
</EditForm>

@code {
    private FormModel _model = new();

    private sealed class FormModel
    {
        public string Name { get; set; } = "";
    }
}

DKLabel and DKText

<DKLabel Text="Account summary" />
<DKText Text="Muted supporting copy." />
<DKText Inline="true" Muted="false">Inline text content.</DKText>

Data Components

DKDataGrid

<DKDataGrid TItem="Order"
            Data="@_orders"
            AllowSorting="true"
            AllowFiltering="true"
            AllowPaging="true"
            AllowColumnPicking="true"
            AllowColumnReorder="true"
            AllowColumnResize="true"
            SaveSettings="true"
            SettingsKey="orders-grid"
            PageSize="10"
            KeySelector="@(o => o.Id.ToString())">
    <ToolbarContent>
        <DKLabel Text="@($"{_orders.Count} orders")" />
    </ToolbarContent>
    <ChildContent>
        <DKDataGridColumn TItem="Order" Title="Order" Key="id" ValueSelector="o => o.Id" Width="90px" />
        <DKDataGridColumn TItem="Order" Title="Customer" Key="customer" ValueSelector="o => o.Customer" />
        <DKDataGridColumn TItem="Order" Title="Status" Key="status" ValueSelector="o => o.Status" />
        <DKDataGridColumn TItem="Order" Title="Total" Key="total" ValueSelector="o => o.Total" Width="120px" />
    </ChildContent>
</DKDataGrid>

@code {
    private List<Order> _orders =
    [
        new(1001, "Asha", "New", 1240),
        new(1002, "Dinesh", "Paid", 890)
    ];

    private sealed record Order(int Id, string Customer, string Status, decimal Total);
}

DataGrid features:

  • Sorting
  • Global and column filters
  • Paging and page size options
  • Single and multiple row selection
  • Column chooser
  • Column visibility
  • Column reorder
  • Column width resize
  • Template columns
  • Async data source
  • Local cache settings persistence
  • Database settings persistence through callbacks

DKDataGrid Selection

<DKDataGrid TItem="Order"
            Data="@_orders"
            SelectionMode="DKDataGridSelectionMode.Multiple"
            SelectedItems="@_selectedOrders"
            SelectedItemsChanged="@(items => _selectedOrders = items.ToList())"
            KeySelector="@(o => o.Id.ToString())">
    <ChildContent>
        <DKDataGridColumn TItem="Order" Title="Customer" Key="customer" ValueSelector="o => o.Customer" />
        <DKDataGridColumn TItem="Order" Title="Status" Key="status" ValueSelector="o => o.Status" />
    </ChildContent>
</DKDataGrid>

@code {
    private List<Order> _selectedOrders = [];
}

DKDataGrid Template Column

<DKDataGrid TItem="Order" Data="@_orders">
    <ChildContent>
        <DKDataGridColumn TItem="Order" Title="Customer" Key="customer">
            <Template Context="order">
                <strong>@order.Customer</strong>
                <DKText Text="@order.Status" />
            </Template>
        </DKDataGridColumn>
    </ChildContent>
</DKDataGrid>

DKDataGrid Cache and Database Settings

Use SettingsStorage to choose where grid settings are saved.

<DKDataGrid TItem="Order"
            Data="@_orders"
            AllowColumnPicking="true"
            AllowColumnReorder="true"
            AllowColumnResize="true"
            SaveSettings="true"
            SettingsKey="orders-grid"
            SettingsStorage="DKDataGridSettingsStorage.CacheAndDatabase"
            SettingsLoader="LoadGridSettings"
            SettingsSaver="SaveGridSettings"
            SettingsClearer="ClearGridSettings">
    <ChildContent>
        <DKDataGridColumn TItem="Order" Title="Customer" Key="customer" ValueSelector="o => o.Customer" />
        <DKDataGridColumn TItem="Order" Title="Status" Key="status" ValueSelector="o => o.Status" />
    </ChildContent>
</DKDataGrid>

@code {
    private Task<DKDataGridSettings?> LoadGridSettings(string key)
    {
        // Load from your database, API, or user profile table.
        return Task.FromResult<DKDataGridSettings?>(null);
    }

    private Task SaveGridSettings(string key, DKDataGridSettings settings)
    {
        // Serialize and save settings.
        return Task.CompletedTask;
    }

    private Task ClearGridSettings(string key)
    {
        // Delete saved settings.
        return Task.CompletedTask;
    }
}

SQLite example:

public async Task SaveGridSettingsAsync(string key, DKDataGridSettings settings)
{
    var json = JsonSerializer.Serialize(settings);

    using var conn = new SqliteConnection(_connectionString);
    await conn.OpenAsync();

    using var cmd = conn.CreateCommand();
    cmd.CommandText = """
        INSERT INTO DataGridSettings (SettingsKey, Json, UpdatedUtc)
        VALUES (@key, @json, @updatedUtc)
        ON CONFLICT(SettingsKey)
        DO UPDATE SET Json = excluded.Json, UpdatedUtc = excluded.UpdatedUtc
    """;
    cmd.Parameters.AddWithValue("@key", key);
    cmd.Parameters.AddWithValue("@json", json);
    cmd.Parameters.AddWithValue("@updatedUtc", DateTimeOffset.UtcNow.ToString("O"));
    await cmd.ExecuteNonQueryAsync();
}

DKDataGrid Async Data

<DKDataGrid TItem="Order"
            @ref="_grid"
            DataSource="LoadOrdersAsync"
            AllowSorting="true"
            AllowPaging="true">
    <LoadingContent>
        <DKLoading Text="Loading orders..." />
    </LoadingContent>
    <ChildContent>
        <DKDataGridColumn TItem="Order" Title="Customer" Key="customer" ValueSelector="o => o.Customer" />
        <DKDataGridColumn TItem="Order" Title="Total" Key="total" ValueSelector="o => o.Total" />
    </ChildContent>
</DKDataGrid>

<DKButton Text="Reload" Icon="refresh" Click="@(async () => await _grid!.LoadDataAsync())" />

@code {
    private DKDataGrid<Order>? _grid;
    private Task<IEnumerable<Order>> LoadOrdersAsync() => Task.FromResult<IEnumerable<Order>>(_orders);
}

DKPivotTable

<DKPivotTable TItem="Sale"
              Items="@_sales"
              RowValueSelector="s => s.Region"
              ColumnValueSelector="s => s.Quarter"
              ValueSelector="s => s.Amount"
              Aggregator="DKAggregatorType.Sum"
              RowHeaderText="Region"
              FormatString="C0"
              StickyHeader="true" />

@code {
    private List<Sale> _sales =
    [
        new("North", "Q1", 12000),
        new("South", "Q1", 9000),
        new("North", "Q2", 15500)
    ];

    private sealed record Sale(string Region, string Quarter, decimal Amount);
}

Supported aggregators: Sum, Count, Average, Min, Max.

DKDropDownGrid

<DKDropDownGrid TItem="Employee"
                TValue="int"
                Items="@_employees"
                ValueSelector="e => e.Id"
                TextSelector="e => e.Name"
                @bind-Value="_employeeId"
                AllowFiltering="true"
                AllowClear="true"
                AllowPaging="true"
                PageSize="8">
    <Columns>
        <DKDropDownGridColumn TItem="Employee" Title="Name" Value="e => e.Name" Width="180px" />
        <DKDropDownGridColumn TItem="Employee" Title="Department" Value="e => e.Department" Width="150px" />
    </Columns>
</DKDropDownGrid>

@code {
    private int? _employeeId;
    private List<Employee> _employees =
    [
        new(1, "Asha", "Sales"),
        new(2, "Dinesh", "Engineering")
    ];

    private sealed record Employee(int Id, string Name, string Department);
}

Multiple selection:

<DKDropDownGrid TItem="Employee"
                TValue="int"
                Items="@_employees"
                ValueSelector="e => e.Id"
                TextSelector="e => e.Name"
                SelectionMode="DKDropDownGridSelectionMode.Multiple"
                Values="@_employeeIds"
                ValuesChanged="@(values => _employeeIds = values)">
    <Columns>
        <DKDropDownGridColumn TItem="Employee" Title="Name" Value="e => e.Name" />
        <DKDropDownGridColumn TItem="Employee" Title="Department" Value="e => e.Department" />
    </Columns>
</DKDropDownGrid>

@code {
    private IReadOnlyList<int?> _employeeIds = [];
}

Grouping and virtualization:

<DKDropDownGrid TItem="Employee"
                TValue="int"
                Items="@_employees"
                ValueSelector="e => e.Id"
                TextSelector="e => e.Name"
                Group="true"
                GroupSelector="e => e.Department"
                Virtualization="true">
    <Columns>
        <DKDropDownGridColumn TItem="Employee" Title="Name" Value="e => e.Name" />
    </Columns>
</DKDropDownGrid>

Display Components

DKButton

<DKButton Text="Save" Icon="save" />
<DKButton Text="Cancel" Variant="DKButtonVariant.Outlined" Color="DKButtonColor.Neutral" />
<DKButton Text="Delete" Icon="delete" Color="DKButtonColor.Danger" />
<DKButton Text="Loading" Loading="true" />
<DKButton Text="Link as button" Href="/page" />
<DKButton Text="Submit" Type="submit" />
Parameter Type Description
Text string? Button label
Icon string? Material Symbol icon name
Type / ButtonType string Button type attribute (default "button")
Variant DKButtonVariant Filled, Outlined, Text, Ghost
Color DKButtonColor Primary, Neutral, Success, Warning, Danger
Size DKButtonSize Small, Medium, Large
Disabled bool Disables the button
Loading bool Shows a spinner and disables
Click / OnClick EventCallback<MouseEventArgs> Click handler
Href string? When set, renders an <a> link instead of a <button>
ChildContent RenderFragment? Child content
Class string? Additional CSS classes
Style string? Inline styles

DKIcon

DK.Blazor uses Google Material Symbols through CSS imports.

<DKIcon Name="home" />
<DKIcon Name="settings" Variant="DKIconVariant.Rounded" Title="Settings" />

DKCard

<DKCard Raised="true">
    <DKLabel Text="Revenue" />
    <strong>$24,500</strong>
</DKCard>

DKAvatar and DKBadge

<DKAvatar Name="Dinesh Kumar" Size="48px" />

<DKBadge Value="12">
    <DKButton Text="Inbox" Icon="mail" />
</DKBadge>

<DKBadge Dot="true" Color="var(--dk-success)">
    <DKAvatar Name="Asha" />
</DKBadge>

DKImage

<DKImage Src="/images/product.png"
         Alt="Product"
         Width="320px"
         Height="180px"
         Caption="Product preview">
    <FallbackContent>
        Image unavailable
    </FallbackContent>
</DKImage>

DKCarosel

<DKCarosel AutoPlay="true" AutoPlayInterval="4000">
    <DKImage Src="/images/slide-1.png" Alt="Slide 1" />
    <DKImage Src="/images/slide-2.png" Alt="Slide 2" />
</DKCarosel>

DKLoading and DKSkeleton

<DKLoading Variant="spinner" Text="Loading..." />
<DKLoading Variant="dots" Text="Please wait" />
<DKLoading Variant="pulse" Text="Fetching data" />
<DKLoading Variant="skeleton" />

<DKSkeleton Variant="text" Lines="3" />
<DKSkeleton Variant="circle" Width="48px" Height="48px" />
<DKSkeleton Variant="rect" Width="100%" Height="180px" />

DKTooltip

<DKTooltip Text="Refresh data" Placement="bottom">
    <DKButton Icon="refresh" Variant="DKButtonVariant.Ghost" />
</DKTooltip>

Overlay Components

DKSnackbarProvider and IDKSnackbarService

Add the provider near the root of your layout:

<DKSnackbarProvider />

Use the service in a page:

@inject IDKSnackbarService Snackbar

<DKButton Text="Success" Click="@ShowSuccess" />
<DKButton Text="Undo" Click="@ShowUndo" />

@code {
    private void ShowSuccess()
    {
        Snackbar.ShowSuccess("Saved successfully.");
    }

    private void ShowUndo()
    {
        Snackbar.Show(
            "Item deleted.",
            DKSnackbarType.Warning,
            actionText: "Undo",
            action: async () => await UndoDelete(),
            location: DKSnackbarLocation.BottomRight,
            durationMs: 6000);
    }

    private Task UndoDelete() => Task.CompletedTask;
}

Snackbar types: Info, Success, Warning, Error.

Snackbar locations: BottomRight, BottomLeft, BottomCenter, TopRight, TopLeft, TopCenter.

DKDialog

<DKButton Text="Open dialog" Click="@(() => _dialogOpen = true)" />

<DKDialog Title="Confirm delete"
          Size="420px"
          @bind-Visible="_dialogOpen">
    Are you sure you want to delete this item?
    <Footer>
        <DKButton Text="Cancel"
                  Variant="DKButtonVariant.Outlined"
                  Color="DKButtonColor.Neutral"
                  Click="@(() => _dialogOpen = false)" />
        <DKButton Text="Delete"
                  Color="DKButtonColor.Danger"
                  Click="@Delete" />
    </Footer>
</DKDialog>

@code {
    private bool _dialogOpen;

    private Task Delete()
    {
        _dialogOpen = false;
        return Task.CompletedTask;
    }
}

DKFab and DKFabMenu

<DKFab Icon="add" Text="Add" Position="bottom-right" Click="@Add" />

<DKFabMenu Icon="add" @bind-Open="_fabOpen">
    <DKFab Icon="edit" Click="@Edit" />
    <DKFab Icon="delete" Click="@Delete" />
    <DKFab Icon="share" Click="@Share" />
</DKFabMenu>

@code {
    private bool _fabOpen;
    private Task Add(MouseEventArgs _) => Task.CompletedTask;
    private Task Edit(MouseEventArgs _) => Task.CompletedTask;
    private Task Delete(MouseEventArgs _) => Task.CompletedTask;
    private Task Share(MouseEventArgs _) => Task.CompletedTask;
}

DKBacktoTop

<DKBacktoTop Threshold="400" />

DKErrorBoundary

<DKErrorBoundary OnError="LogError">
    @Body
    <FallbackContent Context="ex">
        <DKPanel Title="Something went wrong" Raised="true">
            @ex.Message
        </DKPanel>
    </FallbackContent>
</DKErrorBoundary>

@code {
    private Task LogError(Exception ex) => Task.CompletedTask;
}

DKDialogProvider and DKPopoverProvider

Place them once near the root of the app:

<DKPopoverProvider />
<DKDialogProvider />
<DKSnackbarProvider />

Enums

Enum Values
Orientation Horizontal, Vertical
AlignItems Start, Center, End, Stretch, Baseline
JustifyContent Start, Center, End, Between, Around, Evenly
SidebarPosition Left, Right
DKButtonVariant Filled, Outlined, Text, Ghost
DKButtonColor Primary, Neutral, Success, Warning, Danger
DKMenuAlignment Start, End
DKValidationMessageStyle Pop, Flat
DKTextboxMode Text, Password, Number, Textarea, Email, Tel, Url, Search
DKTextboxVariant Outline, Filled, Flushed, Unstyled
AccordionMode Multi, Single
DKIconVariant Filled, Outlined, Rounded, Sharp
DKTabStyle Underline, Pills, Buttons
DKTabSelectionMode Single, Multiple
DKDataGridSelectionMode None, Single, Multiple
DKFilterPopupRenderMode OnDemand, Always
DKFilterCaseSensitivity CaseSensitive, CaseInsensitive
DKDataGridSettingsStorage Cache, Database, CacheAndDatabase
DKAggregatorType Sum, Count, Average, Min, Max
DKDropDownGridSelectionMode Single, Multiple
DKSnackbarType Info, Success, Warning, Error
DKSnackbarLocation BottomRight, BottomLeft, BottomCenter, TopRight, TopLeft, TopCenter

Build From Source

dotnet build DK.Blazor.slnx -c Release

The repository contains:

src/DK.Blazor              Razor class library
samples/DK.Blazor.Server  Blazor Server sample app
nupkg                     Package output

Notes

  • Components support Class and Style parameters for local styling.
  • The package ships CSS variables for theme-aware styling.
  • Use stable Key values on DKDataGridColumn when saving grid settings.
  • Include dk.blazor.js when using theme persistence, layout responsiveness, select behavior, DataGrid settings, DataGrid resizing, DropDownGrid positioning, or back-to-top helpers.
Product Compatible and additional computed target framework versions.
.NET net8.0 is compatible.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed.  net9.0 is compatible.  net9.0-android was computed.  net9.0-browser was computed.  net9.0-ios was computed.  net9.0-maccatalyst was computed.  net9.0-macos was computed.  net9.0-tvos was computed.  net9.0-windows was computed.  net10.0 is compatible.  net10.0-android was computed.  net10.0-browser was computed.  net10.0-ios was computed.  net10.0-maccatalyst was computed.  net10.0-macos was computed.  net10.0-tvos was computed.  net10.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last Updated
1.0.9 114 8/3/2026
1.0.8 105 7/16/2026
1.0.7 116 7/6/2026
1.0.6 112 7/2/2026
1.0.5 123 6/24/2026
1.0.4 123 6/20/2026
1.0.3 123 6/18/2026
1.0.2 115 6/17/2026
1.0.0 143 6/6/2026 1.0.0 is deprecated because it is no longer maintained.