The Base UI

The Base UI is a CDN-installable UI kit built with Bootstrap 5 styling and Owl-enhanced behavior. It is designed for static HTML, server-rendered pages, Base HUB website pages, and third-party projects that need one CSS file and one JavaScript file.

<link rel="stylesheet" href="/dist/baseui.min.css">
<script src="/dist/baseui.min.js" defer></script>

dist/baseui.min.js is fully self-contained: Bootstrap's JS bundle, the Owl runtime, every pure Owl component class, and the theme helper are all embedded ahead of/alongside BaseUI's own code inside this one file, in load order (Bootstrap, then Owl, then BaseUI), so nothing else needs to load first. dist/baseui.esm.js is the same thing for native import/module usage. There is no more separate baseui.owl.*/baseui.components.esm.js/baseui.theme.esm.js — this one file is the whole public API. (dist/bootstrap.bundle.min.js still ships standalone, unmodified, in case a project wants vendored Bootstrap JS on its own — BaseUI itself never needs it loaded separately.)

BaseUI also exposes every component (all 65 in the registry, as of 1.1.0) as a real Owl component class for consumer Owl apps that want <Button/>-style imports instead of b-ui markers — see Pure Owl Components.

For app-level theme controls, import createThemeController/BaseUITheme as @base/theme in browser import maps (pointing at the same dist/baseui.esm.js) or straight from @thebase/baseui in npm/bundler apps, to create persisted light/dark toggles like the documentation pages use.

Release notes

1.1.0 — full pure Owl component rollout

Every component under src/components/<name>/ now ships both APIs: the existing static b-ui adapter (<name>.js) and a pure Owl component class (<name>.component.js), exported from @thebase/baseui/components. This is purely additive:

• Existing b-ui users need no changes. Static markup, attributes (b-att-*), events (baseui:*), and CSS classes are unchanged.
• Owl app users can now import any component — not just the former pilot set (Button, Badge, Card, Input, Tabs, Dialog) — from @thebase/baseui/components, register it under static components, and use <ComponentName/> tag syntax after loading dist/baseui.templates.xml. See Pure Owl Components.
• No components are static-only. Every entry in src/registry/baseui.registry.json now carries owlComponents (the exported Owl class names) and templateName (the namespaced template it renders) metadata.
• A few components' pure Owl treatment is intentionally lighter or reshaped versus their static markup-driven adapter — most notably chart (a slotted container; static Chart.js bootstrapping stays a b-ui-only concern) and the data-driven data-table/combobox/command/calendar (props-driven instead of slot/markup-driven, since Owl components can't introspect arbitrary authored child markup the way the static adapter's DOM-scanning can). See each component's doc page under docs/components/ for specifics.
• This is a minor release (1.0.0 → 1.1.0): no existing public static-adapter behavior changed.

Migration (1.0.0 → 1.1.0)

• b-ui / static-adapter users: no action needed. Nothing about b-ui, b-att-*, baseui:* events, or generated CSS classes changed in this release.
• To start using the pure Owl API, import component classes straight from @thebase/baseui (they're named exports alongside the default BaseUI export) and compose them under static components in your own Owl components.
• Owl framework APIs (Component, mount, useState, ...) come from @base/owl, not @odoo/owl — this repo's own source, tests, and docs never import @odoo/owl directly outside the facade implementation, and consumer apps should follow the same rule so every Owl component (yours and BaseUI's) shares one Component class at runtime.
• Load dist/baseui.templates.xml before mounting an Owl root that uses BaseUI component tags. A component class alone does not carry its template — pass the templates string/file into your App's templates config first. See Pure Owl Components for the exact loading contract and a worked example.

Project Documents

Use these documents as the canonical project map:

• Usage Guide is the single entry point for integrating BaseUI into a consumer project — start here, then follow its links into the reference docs below.
• Installation covers CDN, npm, self-hosted usage, icon assets, pinned versions, and release guardrails.
• Runtime API documents the window.BaseUI global, mounting lifecycle, theming API, and destroy behavior.
• Registry explains dist/baseui.registry.json, build files, block metadata, component metadata, and integrity hashes.
• Theming describes b-theme, runtime theme overrides, shadcn-aligned tokens, Bootstrap variable mapping, and shared example theme persistence.
• Built-in Icons covers the Lucide icon library, b-icon markup, accessibility rules, self-hosted icon paths, and JavaScript helpers.
• Component Authoring defines the src/components/<name>/ source contract, component registration rules, event naming, cleanup requirements, and CSS scoping policy.
• Pure Owl Components covers the pure Owl component API (@thebase/baseui + dist/baseui.templates.xml), what to load, and common mistakes.
• Blocks documents copyable static shadcn-style blocks, source stylesheet ownership under examples/blocks/, gallery/viewer URLs, and block icon rules.
• Component Reference starts the per-component documentation set in docs/components/; each component page includes usage, attributes, events, accessibility notes, and test guidance where relevant.
• Frontend Implementation Plan records the completed BaseUI 1.0.0 delivery checklist and earlier decisions for engineering context.
• Historical Product Plan preserves the original Bootstrap 5 + Owl product brief; use current docs/ and registry files when they disagree with older planning assumptions.

Development

npm install
npm run build
npm run dev

Open examples/index.html through the dev server to test the browser build.

examples/index.html is the single Owl app shell for docs, the component gallery, the block gallery, icons, and the chart catalog, all reachable through one main-nav and hash routes (#/docs, #/components, #/blocks, #/icons, #/chart). Old bookmarked URLs like /docs and /blocks redirect to their hash-route equivalent. Each block has a shadcn-style Preview/Code/responsive viewer plus its source stylesheet colocated in examples/blocks/. examples/charts/index.html mirrors the current shadcn chart catalog with interactive BaseUI examples for area, bar, line, pie, radar, radial, and tooltip charts, and is embedded inline at #/chart.

BaseUI includes the full Lucide SVG icon set as a built-in icon library. Use <span b-icon="search"></span> in HTML, or BaseUI.icons.lucide.url("search") from JavaScript. Builds publish all SVGs to dist/icons/lucide/ and an index at dist/icons/lucide.json.

Package Scripts

• npm run dev starts a static server for examples and built dist/ assets.
• npm run build creates CDN and npm artifacts in dist/.
• npm run lint checks JavaScript and CSS policy.
• npm run test runs runtime tests.
• npm publish runs prepublishOnly first.

Distribution

The npm package publishes the built dist/ artifacts plus package metadata. The browser build bundles Bootstrap CSS, and dist/baseui.min.js/baseui.esm.js embed Bootstrap's JS bundle, the Owl runtime, every pure Owl component class, and the theme helper directly (Bootstrap then Owl then BaseUI, in that load order) — consumers install BaseUI with one stylesheet and one script tag for either API. Bootstrap's JS drives every component that has a Bootstrap JS equivalent (modal, dropdown, collapse, tab, toast, carousel, tooltip, popover, alert); BaseUI's .behavior.js/runtime/*.js helpers wrap Bootstrap's JS API instead of reimplementing it, for both the static and pure-Owl APIs. dist/bootstrap.bundle.min.js also ships standalone (unmodified) and dist/baseui.icons.esm.js stays a separate, deliberate exception (2000+ generated icon components would blow the main bundle's size budget) — everything else is one file. Every shipped CSS/JS artifact is minified — there are no unminified twins to keep in sync.