havit / Havit.Blazor

Free Bootstrap 5 components for ASP.NET Blazor + optional enterprise-level stack for Blazor development (gRPC code-first, layered architecture, localization, auth, ...)

HAVIT Blazor - Bootstrap 5 component bundle

• Free Bootstrap 5.3 components for ASP.NET Blazor
• .NET 6+ with Blazor WebAssembly or Blazor Server (other hosting models not tested yet, .NET 7 fully supported)
• Enterprise project template (optional) - layered architecture, EF Core, gRPC code-first, ...

If you enjoy using HAVIT Blazor, you can become a sponsor. Your sponsorship will allow us to devote time to features and issues requested by the community (i.e. not required by our own projects) ❤️.

See >>Interactive Documentation & Demos<<

🔥Migration to v4🔥

Components

Forms

• HxAutosuggest - Component for single item selection with dynamic suggestions.
• HxCalendar - Basic calendar building block.
• HxInputDate - Date picker. Form input component for entering a date.
• HxInputDateRange - Date range picker. Form input component for entering start date and end date.
• HxInputFile[Core] - Wraps HxInputFileCore as Bootstrap form control (incl. Label etc.).
• HxInputFileDropZone - Ready-made UX for drag&drop file upload.
• HxInputNumber - Numeric input.
• HxInputPercent - Numeric input in percentages with value normalization (0% = 0, 100% = 1.0).
• HxInputRange - Range input (slider).
• HxInputTags - Input for entering tags.
• HxInputText - Text input (also password, search, etc.)
• HxInputTextArea - Textarea.
• HxCheckbox - Checkbox input.
• HxCheckboxList - Multiple choice by checkboxes.
• HxFormState - Propagates form states as a cascading parementer to child components.
• HxFormValue - Displays a read-only value in the form control visual.
• HxRadioButtonList - Select.
• HxSelect - Select - DropDownList - single-item picker.
• HxMultiSelect - Unlike a normal select, multiselect allows the user to select multiple options at once.
• HxSearchBox - A search input component witch automatic suggestions, initial dropdown template and free-text queries support.
• HxSwitch - Switch input.
• HxFilterForm - Edit form derived from HxModelEditForm with support for chip generators.
• HxValidationMessage - Displays a list of validation messages for a specified field.

Buttons & Indicators

• HxButton - Bootstrap button.
• HxButtonGroup - Bootstrap ButtonGroups.
• HxButtonToolbar - Bootstrap ButtonGroups.
• HxCloseButton - Bootstrap close-button.
• HxSubmit - Submit button.
• HxDropdown - Bootstrap 5 Dropdown.
• HxBadge - Bootstrap Badge component.
• HxChipList - Presents a list of chips as badges.
• HxIcon - Displays an icon.
• HxSpinner - Bootstrap Spinner (usually indicates operation in progress).
• HxProgressIndicator - Displays the content of the component as "in progress".
• HxTooltip - Bootstrap Tooltip component, activates on hover.
• HxPopover - Bootstrap Popover component.

Data & Grid

• HxGrid - Grid to display tabular data from data source.
• HxContextMenu - Ready-made context menu.
• HxPager - Pager.
• HxRepeater - A data-bound list component.
• HxTreeView - Component to display hierarchy data structure.

Layout & Typography

• HxAccordion - Bootstrap accordion component.
• HxAlert - Bootstrap Alert.
• HxBadge - Bootstrap Badge component.
• HxCard - Bootstrap Card component.
• HxCarousel - A slideshow component for cycling through elements—images or slides of text—like a carousel.
• HxCollapse - Bootstrap 5 Collapse component.
• HxDropdown - Bootstrap 5 Dropdown.
• HxIcon - Displays an icon.
• HxSpinner - Bootstrap Spinner (usually indicates operation in progress).
• HxPlaceholder - Bootstrap 5 Placeholder component, aka Skeleton.
• HxProgress - Bootstrap 5 Progress component.
• HxProgressIndicator - Displays the content of the component as "in progress".
• HxTooltip - Bootstrap Tooltip component, activates on hover.
• HxTabPanel - Container for HxTab.
• HxListGroup - Bootstrap 5 List group component.
• HxListLayout - Page layout for data presentation (usualy HxGrid with filter in HxOffcanvas).
• HxFormValue - Displays a read-only value in the form control visual (as .form-control, with label, border, etc.).

Navigation

• HxNavbar - Bootstrap 5 Navbar component - responsive navigation header.
• HxSidebar - Sidebar component - responsive navigation sidebar.
• HxNav - Bootstrap Nav component.
• HxNavLink - Bootstrap Nav component.
• HxScrollspy - Bootstrap Scrollspy component.
• HxBreadcrumb - Bootstrap 5 Breadcrumb component. Indicates the current page’s location within a navigational hierarchy.
• HxAnchorFragmentNavigation - Compensates Blazor deficiency in anchor-fragments (scrolling to page#id URLs).
• HxContextMenu - Ready-made context menu.
• HxDropdown - Bootstrap 5 Dropdown.
• HxTabPanel - Container for HxTab for easier implementation of tabbed UI.
• HxRedirectTo - Rendering a HxRedirectTo will navigate to a new location.

Modals & Interactions

• HxMessageBox - Component to display message-boxes.
• HxModal - Component to render modal dialog as a Bootstrap Modal.
• HxDialogBase - Base class to simplify custom modal dialog implementation.
• HxOffcanvas - Bootstrap Offcanvas component (aka Drawer).
• HxMessenger - HxToastContainer wrapper for displaying HxToast messages dispatched through IHxMessengerService.
• HxToast - Bootstrap Toast component. Not intented to be used in user code, use HxMessenger.

Special

• HxDynamicElement - Renders an element with the specified name, attributes and child-content.
• HxGoogleTagManager - Support for Google Tag Manager - initialization and pushing data to data-layer.