Add components.

New site? Follow the complete setup and MaterialX integration guide or download the tested starter.

One wrapper. Two component libraries.

Load the shared assets

Add these URLs to your ProperDocs configuration. Keep your existing MaterialX theme and site overrides.

extra_css:
  - https://i.fontlab.com/fltheme26/1.0.0/components.css
  - https://i.fontlab.com/fltheme26/1.0.0/theme.css
extra_javascript:
  - https://i.fontlab.com/fltheme26/1.0.0/basecoat.js
  - https://i.fontlab.com/fltheme26/1.0.0/theme.js

For static HTML, load the CSS as stylesheets and the JavaScript as deferred scripts in the same order.

Choose a component

<div class="fltheme-components">
  <button class="btn">Basecoat</button>
  <button class="du-btn du-btn-primary">daisyUI</button>
</div>

Follow the Basecoat markup or the daisyUI markup, adding du- to each daisyUI component class. Keep the wrapper separate from the component root.

Use unique IDs for tabs, menus and their controls. Call FLTheme.refresh() after restoring or manually inserting containers. The host controls light/dark mode; a wrapper can opt into data-fltheme-mode="dark" or "light".

Chart.js and Basecoat Chart are not included. Page layout utilities are not an unlimited Tailwind build: use site CSS for layout.