ng-bootstrap HomeBasicAlertFormsFloating labelsInput groupMulti-rangeRangeSelectRadioCheckboxDatepickerTimepickerDateTime pickerContainersGridCardTab controlRatingBadgeBreadcrumbButton groupButton typeCalendarMarqueeList groupTreeviewTree selectTableClosePaginationPlaceholderSpinnerColor pickerProgress barFor directiveIconOverlaysModalsOffcanvasTooltipToastPopoverDropdownTypeaheadContext menuShellDropdown menu (WC)AdvancedCopyCode snippetPipesTrust-htmlSplit-stringLinifySlugifyWord-countFont-colorHas-propertyToggle buttonsSticky footerAutofocusTrackByAsync HostBindingInstance ofIs interfaceResizableOrdinal numbersMarkdownParallaxPriority navigationScrollspyFile uploadSignature padLazy-loading componentsUser-agentNavigation lockNavigation lock (master/detail)EnterpriseCarouselSchedulerTimelineDockRibbonTile managerDatatablesFile managerQuery builderOTP inputNavbarSplitterAccordionAnimationsSlide up/downFade in/outColor transitionAdditional samplesCollapseFocusTrapDrag-dropTree-select drag-dropQR-code viewerStepperThemingAnchor scrollingSection 1Section 2Section 3Section 4Section 522.7.0

@mintplayer/ng-bootstrap

A signal-first, zoneless-ready Angular component library built on Bootstrap 5.3 — from form primitives to a full dock manager, scheduler, and ribbon.

v22.7.0Angular 21+Apache-2.0

Why this library

What sets it apart from vanilla ng-bootstrap or Angular Material:
  • Signal-first APIs. Components expose input() / model() / output() / computed() — no RxJS Subjects on public surfaces.
  • Zoneless-ready. The demo itself runs on provideZonelessChangeDetection(). Every component uses ChangeDetectionStrategy.OnPush.
  • Standalone-only. No NgModules on public exports — bare classes you can drop straight into your imports: [...].
  • Built on Bootstrap 5.3 with first-class dark-mode and custom-variant support via BsThemeService. See the Theming guide.
  • Lit 3 web components under the hood for the heavy widgets (dock, scheduler, tile-manager, ribbon) — accessible, encapsulated, framework-agnostic at the core.
  • Tree-shakeable subpath imports like @mintplayer/ng-bootstrap/theming — each component is its own secondary entry point.
  • Per-component styles instead of one global stylesheet — unused components are dropped at build time and the main bundle stays small.
  • SSR-safe. The theming service defers DOCUMENT / DestroyRef injection behind isPlatformBrowser; a pre-paint script pattern is documented.

Install

Install the package — npm 7+ pulls in bootstrap, bootstrap-icons, @angular/cdk, lit, and the other peer dependencies automatically:

Then wire the library's compiled Bootstrap bundle into the styles array of your application's angular.json:

Alternatively, @forward it from your styles.scss when you want to override Bootstrap's SCSS variables ($primary, $body-bg, …) before the import:

Flagship components

Beyond the Bootstrap-shaped basics, the library ships a handful of components that would otherwise be heavy third-party dependencies in their own right.

Scheduler

Day / week / month calendar with drag-drop event editing, ARIA-keyboard navigation, and signal-driven data binding. Built on Lit 3 internally.

See the demo →
Dock manager

VS Code-style splittable, draggable panel manager with same-layer splitter intersection glyphs.

See the demo →
Ribbon

Microsoft-style command surface — nine item kinds, quick-access toolbar, touch mode.

See the demo →
Tile manager

Windowless push-and-reflow tiling layout. Alternative to dock for dashboard shells.

See the demo →
Datatable

CDK virtual-scroll-backed table with pagination, selection, and resizable columns; one signal-driven data contract.

See the demo →
Query builder

Visual builder for nested AND/OR queries — full operator catalog with relative-date and array ops, drag-and-drop, sub-queries, custom value editors. Emits a canonical JSON tree the backend translates server-side.

See the demo →
Theming

Live light / dark / auto plus custom variants like sepia, all via a single signal-based service. SSR-safe.

See the demo →

Quickstart

A minimal standalone component using the alert, button-type, and theming packages together:

Where to next