KNM.RazorComponents

A comprehensive, highly customizable Razor component library for Blazor and MAUI Hybrid (.NET 10+).

---

Features

Category	Component	Description
Data Entry	KNMInput<T>	21 input types, 7 layouts, password complexity, field compare, input mask, prefix/suffix
	KNMFormGenerator<T>	Auto-generated forms from model attributes, nested objects, conditional visibility
	KNMAutocomplete	Typeahead with async search, multi-select chips, strict mode
	KNMColorPicker	HSB spectrum, preset palette, hex input, alpha channel
	KNMOTP	Multi-digit OTP input with auto-advance, paste, separator
	KNMRating	5 icon types, half-star support, readonly mode
	KNMToggle	9 visual styles (Classic to Liquid), on/off text
	KNMDropzone	Drag-and-drop file upload, preview, progress
	KNMCaptcha	Shape-drawing CAPTCHA ($1 Unistroke), 8 themes
Data Display	KNMDataGrid<T>	DataTables-inspired: sort, filter, CRUD, export, group, inline edit
	KNMChart	Chart.js 4: bar, line, pie, doughnut, radar, mixed
	KNMBadge	Dot/text notification badge, 6 variants, 4 positions
	KNMChip	Selectable/closeable chips for tags and filters
	KNMGauge	SVG gauge: full/semi/quarter arc, color thresholds
	KNMProgressBar	Linear/circular, striped, indeterminate
	KNMSkeleton	Content placeholder: text, rect, circle, wave/pulse
	KNMTimeline	Vertical/horizontal, alternating layout, icons
	KNMCarousel	Slide/fade transitions, autoplay, touch, keyboard
	KNMTooltip	Top/bottom/left/right positioned tooltips
	KNMAvatar	Image/initials, status dot, avatar groups
	KNMAuditFooter	NIS2/GDPR audit trail (CreatedBy/At + UpdatedBy/At)
Feedback	KNMToastContainer	Programmatic toasts, 9 positions, auto-dismiss
	KNMAlert	SweetAlert-style confirm/prompt dialogs
	KNMModal	5 sizes, 11 positions, 3 animations, keyboard, modal stack
	KNMButton	17 variants, loading spinner, confirm mode, icons
	KNMNotification	Inline dismissable notification banners
Layout	KNMTabs	Horizontal/vertical, closeable, keyboard navigation
	KNMAccordion	Single/multi-open collapsible panels
	KNMBreadcrumb	Navigation trail with custom separators and icons
	KNMDrawer	Overlay/push/mini side panel
	KNMMenu	Dropdown menu, 4 positions, auto-close
	KNMStepper	Multi-step wizard with validation
	KNMTreeView	Hierarchical tree with checkboxes
	KNMSplitter	Resizable split panes, drag, collapse
	KNMFAB	Floating action button with speed dial
Scheduling	KNMScheduler	Day/Week/Month/Agenda/Timeline/Year views, RRULE recurrence

All modules use Fluent Builder API and can be selectively enabled/disabled in DI.

---

Installation

dotnet add package KNM.RazorComponents --version 1.1.0

---

What's New in v1.1.0

CSS Bootstrap Migration — Components now use standard Bootstrap 5.3 CSS classes instead of custom knm-* equivalents. This means:

• Better theme compatibility — Components inherit your Bootstrap theme automatically
• Smaller CSS footprint — ~450 lines of redundant CSS removed
• Standard override — Use Bootstrap's documented classes for customization

Components migrated: KNMCard, KNMModal, KNMCarousel, KNMMenu, KNMAccordion, KNMProgressBar, KNMBreadcrumb, KNMBadge.

Zero build warnings — All 495 build warnings resolved (XML documentation, nullable references, async issues).

Breaking change: If you targeted custom knm-card-*, knm-modal-*, knm-carousel__*, knm-menu-*, knm-accordion__*, knm-progress__bar--*, knm-breadcrumb__*, or knm-badge--{color} classes in your CSS, update them to their Bootstrap equivalents. See the migration guide.

---

Quick Start

1. Register services

// Program.cs
builder.Services.AddHttpClient(); // Required for email validation
builder.Services.AddKnmRazorComponents()
    .WithStyle(KnmInputStyle.Default)          // Global input style
    .WithGlobalLayout(LayoutType.Floating)      // Global layout fallback
    .WithPasswordComplexity(o =>                // Password strength rules
    {
        o.RequiredLength = 8;
        o.RequireUpperCase = true;
        o.RequireLowerCase = true;
        o.RequireDigit = true;
        o.RequireSpecialCharacter = true;
    })
    .WithForms()
    .WithGrid()
    .WithModals()
    .WithToast(o => { o.Position = ToastPosition.TopRight; o.MaxVisible = 5; })
    .WithScheduler(o => o.Locale = "it-IT")
    .WithOtp()
    .WithChart()
    .WithCaptcha()
    .WithToggle(o => { o.DefaultStyle = KnmToggleStyle.Classic; });

2. Add asset placeholders

All CSS (including Phosphor Icons) and JS are bundled in the DLL and auto-injected at runtime via placeholder comments:

<!-- App.razor or _Host.cshtml -->

<!-- In <head>, after Bootstrap CSS -->
<link href="lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<!--[knm-css]-->

<!-- Before </body>, after Bootstrap JS -->
<script src="lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!--[knm-js]-->

No CDN required — Phosphor Bold/Fill icons and all component styles are included.

3. Add imports

All namespaces (Components, Models, Builders, Utilities) are auto-imported via the NuGet .targets file. You only need a single line:

@* _Imports.razor *@
@using KNM.RazorComponents.Components

---

KNMInput

21 input types: Text, Email, Password, Number, Date, DateTime, Time, Select, Checkbox, Switch, TextArea, RadioButtonList, ButtonSelect, Color, Range, File, Tel, Search, Month, Week, Hidden.

Layouts

Layout	Description
Vertical	Label above input (default)
Horizontal	Label left, input right
Floating	Floating/Material-style label
Bordered	Material Design bordered (label floats into top border)
Borderless	Material Design borderless (underline only)
Rounded	Pill-style rounded corners
Filled	Material Design filled (tinted background with underline)

Usage

<KNMInput T="string"
          Value="@model.Name"
          ValueChanged="@(v => model.Name = v ?? "")"
          For="@(() => model.Name)"
          LabelOverride="Full Name"
          InputTypeOverride="KnmInputType.Text"
          Layout="LayoutType.Floating" />

Password with Complexity Check

Enable the inline strength meter to show real-time password requirements:

<KNMInput T="string"
          Value="@model.Password"
          ValueChanged="@(v => model.Password = v ?? "")"
          For="@(() => model.Password)"
          InputTypeOverride="KnmInputType.Password"
          LabelOverride="New Password"
          ComplexityCheck="true" />

Configure requirements globally via DI:

builder.Services.AddKnmRazorComponents()
    .WithPasswordComplexity(o =>
    {
        o.RequiredLength = 10;
        o.RequireUpperCase = true;
        o.RequireLowerCase = true;
        o.RequireDigit = true;
        o.RequireSpecialCharacter = false;
    });

Password Confirmation (Field Compare)

Compare two fields for equality (e.g. password confirmation):

<KNMInput T="string"
          Value="@model.ConfirmPassword"
          ValueChanged="@(v => model.ConfirmPassword = v ?? "")"
          For="@(() => model.ConfirmPassword)"
          InputTypeOverride="KnmInputType.Password"
          LabelOverride="Confirm Password"
          CompareFields="true"
          CompareTo="@model.NewPassword"
          CompareToLabel="New Password" />

Input Mask

Apply format masks to enforce input patterns in real-time:

<KNMInput T="string"
          @bind-Value="phone"
          InputTypeOverride="KnmInputType.Tel"
          LabelOverride="Phone"
          Mask="(###) ###-####" />

Mask characters:

Character	Matches	Example
#	Digit (0-9)	### → 123
A	Letter (a-z, A-Z)	AA → IT
*	Any alphanumeric	*** → A1b
Other	Literal separator (auto-inserted)	(, ), -, /, .

Examples:

Mask	Input	Result
(###) ###-####	1234567890	(123) 456-7890
##/##/####	25031990	25/03/1990
AA-####	IT1234	IT-1234
###.###.###-##	12345678901	123.456.789-01

Prefix & Suffix Adornments

@* Suffix icon *@
<KNMInput T="string" @bind-Value="email"
          SuffixIcon="ph-envelope"
          InputTypeOverride="KnmInputType.Email" />

@* Clickable suffix button *@
<KNMInput T="string" @bind-Value="search"
          SuffixIcon="ph-magnifying-glass"
          SuffixAsButton="true"
          OnSuffixClick="HandleSearch" />

@* Prefix text *@
<KNMInput T="string" @bind-Value="website"
          PrefixText="https://"
          LabelOverride="Website" />

@* Prefix + Suffix *@
<KNMInput T="decimal" @bind-Value="price"
          PrefixText="€"
          SuffixText=".00"
          LabelOverride="Price" />

Parameters

Parameter	Type	Default	Description
Value	T	—	Two-way bound value
InputTypeOverride	KnmInputType?	null	Override auto-detected input type
Layout	LayoutType?	null	Layout variant (falls back to global)
LabelOverride	string?	null	Custom label text
PlaceholderOverride	string?	null	Custom placeholder text
Size	KnmInputSize	Normal	Small, Normal, Large
Disabled	bool	false	Disable the input
HelperText	string?	null	Help text below the input
ComplexityCheck	bool	false	Enable password strength meter
CompareFields	bool	false	Enable field comparison validation
CompareTo	T?	null	Value to compare against
CompareToLabel	string	""	Label of the compared field (for error message)
Mask	string?	null	Input mask pattern (#=digit, A=letter, *=any)
DebounceMs	int	0	Debounce delay in milliseconds
PrefixIcon	string?	null	Phosphor icon class for left adornment
PrefixText	string?	null	Text for left adornment
SuffixIcon	string?	null	Phosphor icon class for right adornment
SuffixText	string?	null	Text for right adornment
SuffixAsButton	bool	false	Make suffix clickable
OnSuffixClick	EventCallback	—	Fired when suffix button is clicked
TextAreaMinRows	int	3	Minimum rows for TextArea
TextAreaMaxRows	int	0 (unlimited)	Maximum rows for TextArea auto-expand
CustomClass	string?	null	Additional CSS class on the input element

CSS Override

Parameter	Scope
CustomClass	Input element

CSS Variables

Variable	Default	Description
--knm-primary	#0d6efd	Primary accent color
--knm-input-border-color	#ced4da	Input border color
--knm-input-focus-color	var(--knm-primary)	Focus ring color
--knm-input-toggle-color	#666	Password eye toggle color
--knm-input-adornment-color	#666	Prefix/suffix adornment color
--knm-input-filled-bg	rgba(0,0,0,0.06)	Filled layout background
--knm-input-filled-bg-focus	rgba(0,0,0,0.09)	Filled layout focus background
--knm-input-filled-placeholder	#333	Filled layout placeholder color
--knm-input-border-width	1px	Border width (Bordered/Borderless)
--knm-input-outline-border-color	var(--bs-primary)	Bordered/Borderless active color

---

KNMFormGenerator

Auto-generates forms from model attributes with validation, nested objects, and conditional visibility.

Model decoration

public class CustomerModel
{
    [KnmGenerator(Label = "First Name", Order = 1)]
    public string FirstName { get; set; } = "";

    [KnmGenerator(InputType = KnmInputType.Email, Order = 3)]
    public string Email { get; set; } = "";

    [KnmGenerator(VisibleWhen = "Country=IT")]
    public string FiscalCode { get; set; } = "";
}

Usage

<KNMFormGenerator TItem="CustomerModel"
                  Model="@customer"
                  Options="@formOptions"
                  OnValidSubmit="HandleSubmit" />

@code {
    private CustomerModel customer = new();
    private var formOptions = KnmFormBuilder<CustomerModel>.Create()
        .Grid(columnsPerRow: 2).FloatingLabels().ShowRequired().Build();
}

---

KNMDataGrid

DataTables-inspired grid with full CRUD, sorting, filtering, grouping, inline edit, and export.

Model decoration

[KnmGridDecorator(DefaultPageSize = 20)]
public class ProductModel
{
    [KnmColumn(Header = "Product", IsSortable = true, IsFilterable = true)]
    public string Name { get; set; } = "";

    [KnmColumn(Header = "Category", RenderAs = ColumnRenderMode.Badge)]
    public ProductCategory Category { get; set; }

    [KnmColumn(Header = "Price", Format = "C2", Alignment = ColumnAlignment.Right)]
    [KnmSensitive(Level = SensitivityLevel.Financial)]
    public decimal Price { get; set; }
}

Usage

<KNMDataGrid TItem="ProductModel"
             Items="@products"
             Options="@gridOptions"
             ColumnConfig="@columnConfig"
             Delegates="@gridDelegates" />

@code {
    var (gridOptions, columnConfig, gridDelegates) =
        KnmGridBuilder<ProductModel>.Create()
            .WithPagination(20).WithCrud().WithExport()
            .WithGroupBy("Category").WithInlineEdit()
            .Build();
}

Cell Render Modes

Auto | Text | Badge | Tag | Image | Icon | Boolean | Progress | Custom

CSS Override

Parameter	Scope
CssClass	Table wrapper
HeaderCssClass	Table header

---

KNMModal

Unified modal with stack management, keyboard support, and full ARIA.

<KNMModal Options="@modalOptions"
          @bind-IsVisible="isOpen">
    <p>Modal body content here.</p>
</KNMModal>

@code {
    bool isOpen;
    var (modalOptions, _) = KnmModalBuilder.Create()
        .WithTitle("Confirm Action").Large().Centered().FadeIn()
        .WithConfirmButton("Save").WithCancelButton().Build();
}

Sizes: Small | Medium | Large | ExtraLarge | Fullscreen

Animations: Fade | Slide | Zoom

CSS classes: Uses Bootstrap modal, modal-dialog, modal-content, modal-header, modal-body, modal-footer, modal-sm/lg/xl, modal-fullscreen, modal-dialog-centered, modal-dialog-scrollable. Custom animations: knm-modal-fade, knm-modal-slide, knm-modal-zoom.

---

KNMScheduler

Full calendar with day, week, month, agenda views and RRULE recurrence.

<KNMScheduler Events="@events"
              Options="@schedOptions"
              OnEventCreated="HandleCreated"
              OnEventUpdated="HandleUpdated"
              OnEventDeleted="HandleDeleted" />

@code {
    var schedOptions = KnmSchedulerBuilder.Create()
        .WithDefaultView(SchedulerViewType.Week)
        .BusinessHours(new TimeOnly(9, 0), new TimeOnly(18, 0))
        .WithNowIndicator().WithWeekNumbers().With12HourFormat()
        .WithLocale("it-IT").Build();
}

---

KNMToastContainer & KNMAlert

Pure C# toast notifications and SweetAlert-style dialogs.

Toast

@* In MainLayout.razor *@
<KNMToastContainer />

@* In any component *@
@inject IKnmToastService ToastService

<button @onclick='() => ToastService.ShowSuccess("Saved!", "Record saved successfully")'>
    Save
</button>

Alert (SweetAlert replacement)

var confirmed = await ToastService.ConfirmAsync("Are you sure?", "This cannot be undone");
if (confirmed) { /* proceed */ }

var name = await ToastService.PromptAsync("Enter name", "New Record");

---

KNMButton

17 Bootstrap variants, 3 sizes, loading spinner, confirm mode, Phosphor icons.

<KNMButton Text="Save"
           Variant="KnmButtonVariant.Primary"
           Icon="ph-bold ph-floppy-disk"
           OnClick="HandleSave" />

<KNMButton Text="Delete"
           Variant="KnmButtonVariant.Danger"
           ConfirmMode="true"
           OnClick="HandleDelete" />

---

KNMOTP

Multi-digit OTP input with auto-advance, paste distribution, and separator.

<KNMOTP @bind-Value="otpCode"
        Length="6"
        Separator="-"
        SeparatorInterval="3"
        OnCompleted="HandleOtpComplete" />

---

KNMChart

Chart.js 4 wrapper with 9 chart types. Lazy-loads Chart.js CDN on first use.

<KNMChart Data="@chartData" Options="@chartOptions" />

@code {
    var chartOptions = KnmChartBuilder.Create().Bar().WithTitle("Revenue").Stacked().Build();
    var chartData = new ChartData
    {
        Labels = ["Jan", "Feb", "Mar"],
        Datasets = [new ChartDataset
        {
            Label = "2026",
            Data = [12000, 19000, 15000],
            BackgroundColor = ["#4CAF50", "#2196F3", "#FF9800"]
        }]
    };
}

Chart types: Bar | Line | Pie | Doughnut | Radar | PolarArea | Bubble | Scatter | HorizontalBar

---

KNMCaptcha

Shape-drawing CAPTCHA using the $1 Unistroke Recognizer. 14 shapes, 8 themes.

<KNMCaptcha Options="@captchaOptions" OnVerified="HandleVerified" />

@code {
    var captchaOptions = KnmCaptchaBuilder.Create()
        .WithTheme(CaptchaTheme.Blue).WithScoreThreshold(0.7).Build();
}

---

KNMAuditFooter

NIS2/GDPR compliant audit trail display.

<KNMAuditFooter CreatedBy="admin" CreatedAt="@DateTime.Now.AddDays(-30)"
                UpdatedBy="editor" UpdatedAt="@DateTime.Now" />

---

KNMAutocomplete

Typeahead autocomplete with async search, multi-select chips, and strict mode.

@* Async search *@
<KNMAutocomplete @bind-Value="city"
                 SearchFunc="SearchCities"
                 MinChars="2"
                 DebounceMs="300"
                 Placeholder="Search city..." />

@* Multi-select with chips *@
<KNMAutocomplete @bind-Value="tag"
                 Items="allTags"
                 MultiSelect="true"
                 @bind-SelectedItems="selectedTags"
                 Strict="true" />

Parameter	Type	Default	Description
Value	string	—	Two-way bound input value
SearchFunc	Func<string, Task<IEnumerable<string>>>	null	Async search function
Items	IEnumerable<string>	null	Static items for local filtering
MinChars	int	2	Min chars before search triggers
DebounceMs	int	300	Debounce delay in ms
MultiSelect	bool	false	Enable multi-select with chips
Strict	bool	false	Value must match an item
ItemTemplate	RenderFragment<string>	null	Custom suggestion template

---

KNMColorPicker

HSB spectrum color picker with presets, hex input, and optional alpha channel.

<KNMColorPicker @bind-Value="color"
                ShowSpectrum="true"
                ShowPresets="true"
                ShowAlpha="false" />

Parameter	Type	Default	Description
Value	string	#3b82f6	Hex color value
ShowSpectrum	bool	true	Show HSB spectrum picker
ShowPresets	bool	true	Show preset palette grid
ShowHexInput	bool	true	Show hex text input
ShowAlpha	bool	false	Show alpha/opacity slider
Presets	List<string>	12 colors	Custom preset colors

---

KNMRating

Star/icon rating with half-star support and multiple icon types.

<KNMRating @bind-Value="rating"
           MaxValue="5"
           AllowHalf="true"
           Icon="RatingIcon.Star"
           ShowValue="true" />

Parameter	Type	Default	Description
Value	double	0	Current rating value
MaxValue	int	5	Maximum rating value
AllowHalf	bool	false	Allow half-star increments
ReadOnly	bool	false	Non-interactive display mode
ShowValue	bool	false	Show numeric value next to stars
Icon	RatingIcon	Star	Icon type: Star, Heart, ThumbUp, Circle, Flag
Size	string	"md"	Size: "sm", "md", "lg"

---

KNMToggle

Customizable toggle switch with 9 visual styles.

<KNMToggle @bind-Value="isEnabled"
           Style="KnmToggleStyle.Neumorphic"
           Size="KnmToggleSize.Medium"
           OnText="ON"
           OffText="OFF" />

Styles: Classic | Material | Neumorphic | Glassmorphism | Retro | Neon | Minimal | ThreeD | Liquid

Configure defaults globally:

.WithToggle(o => { o.DefaultStyle = KnmToggleStyle.Neumorphic; o.DefaultSize = KnmToggleSize.Small; })

---

KNMDropzone

Drag-and-drop file upload with preview and progress tracking.

<KNMDropzone MaxFileSize="5242880"
             MaxFiles="3"
             Accept="image/*,.pdf"
             OnFileAdded="HandleFile" />

Parameter	Type	Default	Description
MaxFileSize	long	10 MB	Maximum file size in bytes
MaxFiles	int	10	Maximum number of files
Multiple	bool	true	Allow multiple file selection
Accept	string	null	MIME types / extensions filter
ShowProgress	bool	false	Show progress bar during read

---

KNMBadge

Notification badge with dot and text modes.

<KNMBadge Content="3" Variant="KnmBadgeVariant.Danger">
    <KNMButton Text="Inbox" Icon="ph-bold ph-bell" />
</KNMBadge>

<KNMBadge Dot="true" Variant="KnmBadgeVariant.Success">
    <KNMAvatar Initials="JD" />
</KNMBadge>

Variants: Primary	Success	Danger	Warning	Info	Secondary

CSS classes: Uses Bootstrap badge, text-bg-primary/success/danger/warning/info/secondary. Custom positioning: knm-badge-wrapper, knm-badge--dot, knm-badge--top-right/left, knm-badge--bottom-right/left.

---

KNMChip

Selectable and closeable chips for tags, filters, and selections.

<KNMChip Text="Blazor" Icon="ph-bold ph-code"
         Closeable="true" OnClose="RemoveTag" />

<KNMChip Text="Active" Variant="KnmChipVariant.Success"
         @bind-Selected="isActive" />

---

KNMCard

Bootstrap-based card component with optional header, footer, image, and style variants.

<KNMCard Title="Dashboard" Icon="ph-bold ph-chart-bar" Subtitle="Monthly overview">
    <p>Card body content here.</p>
    <FooterContent>
        <KNMButton Text="View Details" Variant="KnmButtonVariant.Primary" />
    </FooterContent>
</KNMCard>

CSS classes: Uses Bootstrap card, card-header, card-body, card-footer, card-title, card-subtitle, card-img-top/bottom. Style variants: knm-style-rounded, knm-style-borderless, knm-style-underline (applied via GlobalStyleCssClass).

---

KNMGauge

SVG gauge with full, semi, and quarter arc types and color thresholds.

<KNMGauge Value="75" Min="0" Max="100"
          Type="GaugeType.Semi"
          Unit="%" Label="CPU"
          ShowValue="true" ShowMinMax="true" />

Types: Full (360) | Semi (180) | Quarter (90)

---

KNMProgressBar

Linear and circular progress indicators with indeterminate mode.

<KNMProgressBar Value="65" Variant="KnmProgressVariant.Success" ShowLabel="true" />
<KNMProgressBar Mode="KnmProgressMode.Circular" Value="80" />
<KNMProgressBar Indeterminate="true" Striped="true" />

CSS Variables: --knm-progress-height, --knm-progress-circular-size, --knm-progress-circular-stroke

CSS classes: Uses Bootstrap progress, progress-bar, bg-primary/success/danger/warning/info, progress-bar-striped, progress-bar-animated. Custom: knm-progress--indeterminate, knm-progress-circular*.

---

KNMSkeleton

Content placeholder with pulse and wave animations.

<KNMSkeleton Type="KnmSkeletonType.Text" Lines="3" />
<KNMSkeleton Type="KnmSkeletonType.Circle" Width="48px" Height="48px" />
<KNMSkeleton Type="KnmSkeletonType.Rect" Width="100%" Height="200px" Animation="KnmSkeletonAnimation.Wave" />

Types: Text	Rect	Circle	Avatar

---

KNMTimeline

Vertical/horizontal timeline with alternating layout and icons.

<KNMTimeline Alternate="true">
    <KNMTimelineItem Title="Order Placed" Subtitle="2026-03-19"
                     Icon="ph-bold ph-package" Variant="KnmTimelineItemVariant.Success">
        Your order has been confirmed.
    </KNMTimelineItem>
    <KNMTimelineItem Title="Shipped" Subtitle="2026-03-20"
                     Icon="ph-bold ph-truck" Variant="KnmTimelineItemVariant.Info">
        Package is on the way.
    </KNMTimelineItem>
</KNMTimeline>

---

KNMCarousel

Image/content carousel with slide, fade, and autoplay.

<KNMCarousel Items="slides"
             Transition="CarouselTransition.Fade"
             AutoPlay="true"
             IntervalMs="5000"
             Height="400px" />

Parameter	Type	Default	Description
Items	List<CarouselItem>	—	Slides to display
Transition	CarouselTransition	Slide	Slide, Fade, None
AutoPlay	bool	true	Auto-advance slides
IntervalMs	int	5000	Interval between slides (ms)
ShowArrows	bool	true	Show prev/next arrows
ShowIndicators	bool	true	Show dot indicators
ItemTemplate	RenderFragment<CarouselItem>	null	Custom slide template

CSS classes: Uses Bootstrap carousel, carousel-inner, carousel-item, carousel-control-prev/next, carousel-indicators, carousel-caption, carousel-fade.

---

KNMTabs

Horizontal/vertical tabs with closeable tabs and keyboard navigation.

<KNMTabs @bind-ActiveIndex="activeTab" Closeable="true">
    <KNMTab Title="General">General settings content</KNMTab>
    <KNMTab Title="Security" Icon="ph-bold ph-lock">Security content</KNMTab>
    <KNMTab Title="Notifications">Notification preferences</KNMTab>
</KNMTabs>

Orientations: Horizontal | Vertical Keyboard: ArrowLeft/Right (H), ArrowUp/Down (V), Home, End

---

KNMAccordion

Collapsible panel groups with single or multi-open mode.

<KNMAccordion MultiOpen="false">
    <KNMAccordionItem Title="Section 1">Content for section 1</KNMAccordionItem>
    <KNMAccordionItem Title="Section 2">Content for section 2</KNMAccordionItem>
</KNMAccordion>

CSS classes: Uses Bootstrap accordion, accordion-item, accordion-header, accordion-button, accordion-collapse, accordion-body.

---

KNMBreadcrumb

Navigation breadcrumb trail with custom separators and icons.

<KNMBreadcrumb Items="@breadcrumbs" Separator=">" OnItemClick="Navigate" />

@code {
    List<BreadcrumbItem> breadcrumbs =
    [
        new() { Text = "Home", Href = "/", Icon = "ph-bold ph-house" },
        new() { Text = "Products", Href = "/products" },
        new() { Text = "Detail", IsActive = true }
    ];
}

CSS classes: Uses Bootstrap breadcrumb, breadcrumb-item.

---

KNMDrawer

Side panel with overlay, push, and mini modes.

<KNMDrawer @bind-IsOpen="drawerOpen"
           Mode="KnmDrawerMode.Push"
           Position="KnmDrawerPosition.Left"
           Width="280px">
    <nav>Sidebar navigation</nav>
</KNMDrawer>

Modes: Overlay (backdrop + click-outside) | Push (shifts main content) | Mini (collapsed icon bar)

---

KNMMenu

Dropdown menu with configurable position and auto-close.

<KNMMenu @bind-IsOpen="menuOpen" Position="KnmMenuPosition.BottomEnd">
    <ActivatorContent>
        <KNMButton Text="Actions" Icon="ph-bold ph-caret-down" />
    </ActivatorContent>
    <ChildContent>
        <KNMMenuItem Text="Edit" Icon="ph-bold ph-pencil" OnClick="Edit" />
        <KNMMenuItem Text="Delete" Icon="ph-bold ph-trash" OnClick="Delete" />
    </ChildContent>
</KNMMenu>

Positions: BottomStart | BottomEnd | TopStart | TopEnd

CSS classes: Uses Bootstrap dropdown, dropup, dropdown-menu, dropdown-item, dropdown-divider, dropdown-menu-end.

---

KNMStepper

Multi-step wizard with linear mode and per-step validation.

<KNMStepper @bind-ActiveStep="step" Linear="true" OnCompleted="Finish">
    <KNMStep Title="Account" Validation="ValidateAccount">
        <KNMInput T="string" @bind-Value="email" InputTypeOverride="KnmInputType.Email" />
    </KNMStep>
    <KNMStep Title="Profile" Optional="true">
        <KNMInput T="string" @bind-Value="name" />
    </KNMStep>
    <KNMStep Title="Confirm">
        <p>Review and confirm your details.</p>
    </KNMStep>
</KNMStepper>

---

KNMTreeView

Hierarchical tree with checkboxes, expand/collapse, and custom node templates.

<KNMTreeView Items="@treeNodes"
             ShowCheckboxes="true"
             @bind-SelectedItems="selected" />

---

KNMSplitter

Resizable split panes with drag, collapse, and min/max constraints.

<KNMSplitter Orientation="SplitterOrientation.Horizontal"
             InitialPosition="30"
             Collapsible="true"
             MinFirstPane="20"
             MaxFirstPane="80">
    <FirstPane>Left panel</FirstPane>
    <SecondPane>Right panel</SecondPane>
</KNMSplitter>

---

KNMAvatar

User avatar with image, initials fallback, and presence status.

<KNMAvatar Src="/images/user.jpg" Alt="John Doe" Size="KnmAvatarSize.Large" />
<KNMAvatar Initials="JD" Variant="KnmAvatarVariant.Primary" Status="KnmOnlineStatus.Online" />

@* Avatar group with overflow *@
<KNMAvatarGroup Max="3">
    <KNMAvatar Initials="AB" />
    <KNMAvatar Initials="CD" />
    <KNMAvatar Initials="EF" />
    <KNMAvatar Initials="GH" />
</KNMAvatarGroup>

---

KNMFAB

Floating Action Button with speed dial and configurable direction.

<KNMFAB Icon="ph-bold ph-plus"
        Position="KnmFabPosition.BottomRight"
        Variant="KnmButtonVariant.Primary">
    <KNMFabAction Icon="ph-bold ph-pencil" Label="Edit" OnClick="Edit" />
    <KNMFabAction Icon="ph-bold ph-share" Label="Share" OnClick="Share" />
</KNMFAB>

Positions: TopLeft	TopRight	BottomLeft	BottomRight

---

Attributes Reference

Attribute	Target	Key Properties
[KnmGenerator]	Property	Label, InputType, Order, Visible, Placeholder, Ignore, VisibleWhen, DependsOn
[KnmFormGroup]	Property	GroupName, GroupOrder
[KnmColumn]	Property	Header, Order, Visible, RenderAs, IsSortable, IsFilterable, Format, Alignment
[KnmGridDecorator]	Class	DefaultPageSize, AllowSorting, AllowFiltering, AllowExport
[KnmSensitive]	Property	Level (Personal/Special/Financial/Credential), MaskInPreview
[KnmInput]	Property	InputType, Label, Order, MaxValue, MinValue, Step
[KnmAudit]	Property	IsUserInsert, IsUserUpdate, IsDateInsert, IsDateUpdate

---

CSS Theming

All colors use CSS custom properties. Override in your app:

:root {
    --knm-primary: #0d6efd;
    --knm-success: #198754;
    --knm-danger: #dc3545;
    --knm-warning: #ffc107;
    --knm-info: #0dcaf0;
}

Dark mode: add data-bs-theme="dark" to the root element. All components adapt automatically.

---

Localization

6 locales supported: it-IT (default), en-US, en-GB, fr-FR, de-DE, es-ES.

Configure via DI:

.WithScheduler(o => o.Locale = "de-DE")

---

Dependencies

Package	Version	Purpose
Microsoft.AspNetCore.Components.Web	10.0.0	Blazor framework
ClosedXML	0.105.0	Excel export
DnsClient	1.8.0	Email MX validation
Bootstrap 5.3	bundled	CSS framework (consumer provides)
Phosphor Icons	bundled	Icon library (included in DLL)
Chart.js 4	bundled	Charts (included in DLL, lazy-loaded)

---

License

MIT © KoNiMa S.r.l.