Kronk UI v2

Zero-dependency Custom Elements for the Kronk design system. 51 elements, generated docs, IDE metadata and ASP.NET Core Tag Helpers.

Get started →

Components

• ui-alert — Inline status message.
• ui-avatar — User avatar with image, initials or icon fallback.
• ui-badge — Small status label.
• ui-breadcrumbs — Breadcrumb trail.
• ui-button — Styled button or link.
• ui-card — Surface container with optional header, body and footer.
• ui-card-body — Card body.
• ui-card-footer — Card footer.
• ui-card-header — Card header.
• ui-cluster — Horizontal, wrapping layout primitive.
• ui-container — Centred, width-constrained page container.
• ui-details — Disclosure built on native <details>.
• ui-empty-state — Placeholder for empty content with an optional action.
• ui-grid — Column grid.
• ui-grid-col — Grid column spanning several tracks.
• ui-header — Semantic heading.
• ui-icon — Font Awesome icon.
• ui-input — Labelled native input (text, email, password, number, date, file, color, checkbox, radio, range, …).
• ui-kbd — Keyboard shortcut hint.
• ui-listbox — Keyed, filterable list with keyboard navigation and a custom item template.
• ui-modal — Native <dialog> with promise-based open and close.
• ui-nav — Navigation list.
• ui-nav-item — Navigation item with icon and label.
• ui-nav-section — Navigation section.
• ui-navbar-link — Top bar link with optional icon.
• ui-option — Declarative option for ui-select.
• ui-option-group — Group of ui-option elements.
• ui-option-meta — Secondary text displayed beside an option label (excluded from filtering and the selected label).
• ui-pagination — Page selector.
• ui-progress — Progress bar.
• ui-select — Native, searchable, or inline select control.
• ui-shell — Application shell with collapsible sidebar and top bar.
• ui-sidebar — Application sidebar.
• ui-sidebar-body — Sidebar body.
• ui-sidebar-footer — Sidebar footer.
• ui-sidebar-header — Sidebar header.
• ui-skeleton — Loading placeholder.
• ui-spinner — Loading indicator.
• ui-split-pane — Two resizable panes with a draggable, keyboard-accessible divider.
• ui-stack — Vertical layout primitive.
• ui-switch — Toggle switch backed by a native checkbox.
• ui-tab — Tab trigger inside ui-tabs.
• ui-tab-panel — Panel shown for the matching ui-tab.
• ui-table — Styled wrapper for a native table.
• ui-table-wrapper — Horizontal scroll wrapper for tables.
• ui-tabs — Tabbed content with full keyboard and ARIA support.
• ui-textarea — Labelled multi-line text input.
• ui-theme-toggle — Cycles light, dark and system theme through UI.theme.
• ui-toast-region — Stacking region for toasts; created on demand by UI.toast().
• ui-tooltip — Accessible tooltip attached to an anchor element.
• ui-topbar — Application top bar.

Changelog

2.0.0-alpha.1

• Initial v2 rewrite: Custom Elements runtime, template engine, services, 51 elements, generated docs and IDE metadata, ASP.NET Core tag helpers.