Preline UI

https://preline.co/docs/
Admin
Preline UI is an open-source Tailwind CSS component library with 640+ components, examples,...
Tokens:393,775
Snippets:2,094
Trust Score:9.3
Update:1 week ago
Show doc for...
Tokens:
Raw
### Full Preline UI setup with preline/non-auto and HSStaticMethods

Source: https://preline.co/docs/guides/astro.html

Full Preline UI installation using preline/non-auto as the Astro default. Gives HSStaticMethods and plugin classes while leaving initialization to you, avoiding the load event the main entry listens for. Call autoInit and cleanCollection for the plugins you need.

```typescript
import { HSStaticMethods } from "preline/non-auto";
HSStaticMethods.autoInit(["dropdown", "overlay"]);
HSStaticMethods.cleanCollection(["dropdown", "overlay"]);
```

--------------------------------

### Install optional Preline UI dependencies and copy to static/js

Source: https://preline.co/docs/guides/flask.html

Install jQuery, datatables.net, lodash, vanilla-calendar-pro, dropzone, and nouislider via npm, then copy the built files into static/js/ next to preline.js. Only install what the page actually needs.

```bash
npm install jquery datatables.net lodash vanilla-calendar-pro dropzone nouislidercp node_modules/jquery/dist/jquery.min.js static/js/cp node_modules/datatables.net/js/dataTables.min.js static/js/cp node_modules/lodash/lodash.min.js static/js/cp node_modules/vanilla-calendar-pro/index.js static/js/vanilla-calendar-pro.jscp node_modules/dropzone/dist/dropzone-min.js static/js/cp node_modules/nouislider/dist/nouislider.min.js static/js/
```

--------------------------------

### Install Toastify via npm

Source: https://preline.co/docs/components/toast-notifications.html

Install the toastify-js package using npm.

```bash
npm i toastify-js
```

--------------------------------

### Install Preline UI with npm

Source: https://preline.co/docs/frameworks-aspnet-core.html

Run this command in your ASP.NET Core project directory to install the preline package. Preline UI also requires the Tailwind CSS Forms plugin for form components; install it with `npm install -D @tailwindcss/forms` if not already present.

```bash
npm install preline
```

--------------------------------

### Install @preline/dropdown package

Source: https://preline.co/docs/guides/adonis.html

Install the single-plugin package for the dropdown component. Use this when only a small part of the page needs Preline UI behavior.

```bash
npm install @preline/dropdown
```

--------------------------------

### Install Preline UI and required dependencies

Source: https://preline.co/docs/frameworks-solidjs.html

Install Preline UI and the required type definitions for the current Preline 5.0.0 declaration bundle. Also install the Tailwind CSS Forms plugin if your components contain form controls.

```bash
npm install preline
# Required by the current Preline 5.0.0 declaration bundle
npm install -D @types/dropzone
```

```bash
npm install -D @tailwindcss/forms
```

--------------------------------

### Install preline package in assets directory

Source: https://preline.co/docs/frameworks-phoenix-liveview.html

Run these commands inside the assets directory to install Preline UI and the Tailwind CSS Forms plugin (if not already installed).

```bash
cd assets
npm install preline
```

```bash
npm install -D @tailwindcss/forms
```

--------------------------------

### Full HTML example with input and KBD shortcut hints

Source: https://preline.co/docs/components/kbd.html

Complete HTML document that renders an input with a search icon and a Command + / shortcut hint. The input uses the data-hs-overlay attribute to trigger an overlay. Includes Preline UI script.

```html
<!DOCTYPE html> <html lang="en" dir="ltr" class="relative min-h-full h-full"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Preline UI</title> <link rel="shortcut icon" href="../../favicon.ico"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="../../assets/css/main.min.css"> </head> <body class="w-full max-w-sm mx-auto mt-15"><!-- Input Group --> <div class="relative max-w-xs"> <div class="absolute inset-y-0 inset-s-0 flex items-center pointer-events-none z-20 ps-3.5"> <svg class="shrink-0 size-4 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg> </div> <input type="text" class="py-1.5 sm:py-2 px-3 ps-10 pe-14 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-foreground placeholder:text-muted-foreground focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none" placeholder="Search or type a command" data-hs-overlay="#hs-pro-dnsm"> <div class="absolute inset-y-0 inset-e-0 flex items-center pointer-events-none z-20 pe-3"> <!-- KBD --> <span class="flex flex-wrap items-center gap-x-1 text-sm text-muted-foreground"> <kbd class="min-h-7.5 inline-flex justify-center items-center font-mono text-xs text-muted-foreground rounded-md"> <svg class="shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"/></svg> </kbd> + <kbd class="min-h-7.5 inline-flex justify-center items-center font-mono text-xs text-muted-foreground rounded-md"> / </kbd> </span> <!-- End KBD --> </div> </div> <!-- End Input Group --> <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script> </body> </html>
```

--------------------------------

### Install Preline Agent Skills

Source: https://preline.co/docs/mcp-claude.html

Installs Preline-specific workflow instructions via npx. Run from the project root to add skills that guide Claude's discovery, placement, theming, and validation habits.

```bash
npx skills add htmlstreamofficial/preline
```

--------------------------------

### Run autoInit after Solid mounts with onMount

Source: https://preline.co/docs/guides/solidjs.html

Use onMount to initialize Preline UI only in the browser, avoiding server rendering and page-load timing issues. Keep vendor setup in a cached helper so remounts rescan the DOM without repeating the dynamic-import chain. Use a manual instance with destroy() when a reusable component must own cleanup locally.

```tsx
import { onMount } from "solid-js";import initPreline from "../scripts/preline";export default function DropdownSection() {  onMount(() => {    void initPreline().catch((error: unknown) => {      console.error("[preline] failed to initialize components", error);    });  });  return (    <div class="hs-dropdown relative inline-flex">      <button class="hs-dropdown-toggle" type="button">        Toggle      </button>      <div class="hs-dropdown-menu hidden">Menu</div>    </div>  );}
```

--------------------------------

### Full HTML example for hover and focus underline link styles

Source: https://preline.co/docs/components/links.html

A complete HTML document that includes multiple link examples with different hover and focus underline decoration styles. Use this as a starting point to see the styles in action.

```html
<!DOCTYPE html> <html lang="en" dir="ltr" class="relative min-h-full h-full"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Preline UI</title> <link rel="shortcut icon" href="../../favicon.ico"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="../../assets/css/main.min.css"> </head> <body class="w-full max-w-sm mx-auto space-y-3"><p><a class="text-primary hover:underline hover:decoration-line-8 focus:outline-hidden focus:underline focus:decoration-line-8" href="#">Dark underline</a></p> <p><a class="text-primary hover:underline hover:decoration-line-5 focus:outline-hidden focus:underline focus:decoration-line-5" href="#">Secondary underline</a></p> <p><a class="text-primary hover:underline hover:decoration-primary focus:outline-hidden focus:underline focus:decoration-primary" href="#">Primary underline</a></p> <p><a class="text-primary hover:underline hover:decoration-teal-500 focus:outline-hidden focus:underline focus:decoration-teal-500" href="#">Success underline</a></p> <p><a class="text-primary hover:underline hover:decoration-red-500 focus:outline-hidden focus:underline focus:decoration-red-500" href="#">Invalid underline</a></p> <p><a class="text-primary hover:underline hover:decoration-yellow-500 focus:outline-hidden focus:underline focus:decoration-yellow-500" href="#">Yellow underline</a></p> <p><a class="text-primary hover:underline hover:decoration-line-inverse focus:outline-hidden focus:underline focus:decoration-inverse" href="#">Light underline</a></p> <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script> </body> </html>
```

--------------------------------

### Import Google Font in main.css

Source: https://preline.co/docs/themes.html

Import the Google Font at the top of your CSS file. This example shows the import for Inter and also includes the Tailwind CSS import and theme imports for a Preline theme setup.

```css
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');/* tailwind.css */@import "tailwindcss";/* Base theme tokens + mappings */@import "./themes/theme.css";/* Your theme overrides (copied from theme.css or another premade theme) */@import "./themes/my-theme.css";
```

--------------------------------

### main.tsx: Initialize full Preline UI with autoInit

Source: https://preline.co/docs/guides/react-vite.html

Imports HSStaticMethods from 'preline/non-auto' and calls autoInit with a list of plugin names. This avoids page-load auto-entry and gives control over when initialization happens.

```tsx
import { HSStaticMethods } from "preline/non-auto";HSStaticMethods.autoInit(["dropdown", "overlay"]);
```

--------------------------------

### Full HTML page with underline offset examples

Source: https://preline.co/docs/components/links.html

A complete HTML document demonstrating underline offset utilities with values 1, 2, 4, and 8. Use this as a starting point for testing underline offsets in a Preline UI project.

```html
<!DOCTYPE html>
<html lang="en" dir="ltr" class="relative min-h-full h-full">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Preline UI</title>
  <link rel="shortcut icon" href="../../favicon.ico">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="../../assets/css/main.min.css">
</head>
<body class="w-full max-w-sm mx-auto space-y-3">
  <p><a class="text-primary underline underline-offset-1 decoration-primary hover:opacity-80 focus:outline-hidden focus:opacity-80" href="#">Underline offset 1</a></p>
  <p><a class="text-primary underline underline-offset-2 decoration-primary hover:opacity-80 focus:outline-hidden focus:opacity-80" href="#">Underline offset 2</a></p>
  <p><a class="text-primary underline underline-offset-4 decoration-primary hover:opacity-80 focus:outline-hidden focus:opacity-80" href="#">Underline offset 4</a></p>
  <p><a class="text-primary underline underline-offset-8 decoration-primary hover:opacity-80 focus:outline-hidden focus:opacity-80" href="#">Underline offset 8</a></p>
  <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
</body>
</html>
```

--------------------------------

### Initialize Preline UI in +layout.svelte with afterNavigate

Source: https://preline.co/docs/frameworks-svelte.html

Use this SvelteKit root layout script to run Preline UI's scan on initial load and every client-side navigation. Import vendor-globals before preline/non-auto so optional dependencies are on window before dependency checks. A navigation token guards against stale async imports rerunning the scan.

```svelte
<script lang="ts">  import { afterNavigate } from "$app/navigation";  ...  let navigationToken = 0;  afterNavigate(async () => {    const token = ++navigationToken;    await import("$lib/vendor-globals");    const { HSStaticMethods } = await import("preline/non-auto");    if (token !== navigationToken) return;    HSStaticMethods.cleanCollection();    HSStaticMethods.autoInit();  });</script>...
```

--------------------------------

### Install optional dependencies for Preline UI

Source: https://preline.co/docs/frameworks-react-vite.html

Install optional libraries required by some Preline components. The first command installs runtime packages; the second installs TypeScript type definitions. Only install what you need.

```bash
npm install jquery datatables.net-dt lodash dropzone nouislider vanilla-calendar-pronpm install -D @types/jquery @types/lodash @types/dropzone
```

--------------------------------

### Initialize Tiptap Editor with StarterKit and Custom Extensions

Source: https://preline.co/docs/components/text-editor.html

Sets up a Tiptap editor instance on an element matching '[data-hs-editor-field]' within '#hs-editor-tiptap'. Imports core extensions (StarterKit, Placeholder, Paragraph, Bold, Underline, Link, BulletList, OrderedList, ListItem, Blockquote) from esm.sh and configures their HTML attributes for styling. The editor is configured with a placeholder text and custom classes for various elements.

```javascript
<script type="module">  import { Editor } from 'https://esm.sh/@tiptap/core@2.11.0';  import StarterKit from 'https://esm.sh/@tiptap/starter-kit@2.11.0';  import Placeholder from 'https://esm.sh/@tiptap/extension-placeholder@2.11.0';  import Paragraph from 'https://esm.sh/@tiptap/extension-paragraph@2.11.0';  import Bold from 'https://esm.sh/@tiptap/extension-bold@2.11.0';  import Underline from 'https://esm.sh/@tiptap/extension-underline@2.11.0';  import Link from 'https://esm.sh/@tiptap/extension-link@2.11.0';  import BulletList from 'https://esm.sh/@tiptap/extension-bullet-list@2.11.0';  import OrderedList from 'https://esm.sh/@tiptap/extension-ordered-list@2.11.0';  import ListItem from 'https://esm.sh/@tiptap/extension-list-item@2.11.0';  import Blockquote from 'https://esm.sh/@tiptap/extension-blockquote@2.11.0';  const editor = new Editor({    element: document.querySelector('#hs-editor-tiptap [data-hs-editor-field]'),    editorProps: {      attributes: {        class: 'relative min-h-40 p-3'      }    },    extensions: [      StarterKit.configure({        history: false      }),      Placeholder.configure({        placeholder: 'Add a message, if you\'d like.',        emptyNodeClass: 'before:text-muted-foreground-1'      }),      Paragraph.configure({        HTMLAttributes: {          class: 'text-sm text-foreground'        }      }),      Bold.configure({        HTMLAttributes: {          class: 'font-bold'        }      }),      Underline,      Link.configure({        HTMLAttributes: {          class: 'inline-flex items-center gap-x-1 text-blue-600 decoration-2 hover:underline focus:outline-hidden focus:underline font-medium dark:text-white'        }      }),      BulletList.configure({        HTMLAttributes: {          class: 'list-disc list-inside text-foreground'        }      }),      OrderedList.configure({        HTMLAttributes: {          class: 'list-decimal list-inside text-foreground'        }      }),      ListItem.configure({        HTMLAttributes: {          class: 'marker:text-sm'        }      }),      Blockquote.configure({        HTMLAttributes: {          class: 'relative border-s-4 ps-4 sm:ps-6 border-line-7 sm:[&>p]:text-lg'        }      })    ]  });  const actions = [    {      id: '#hs-editor-tiptap [data-hs-editor-bold]',      fn: () => editor.chain().focus().toggleBold().run()    },    {      id: '#hs-editor-tiptap [data-hs-editor-italic]',      fn: () => editor.chain().focus().toggleItalic().run()    },    {      id: '#hs-editor-tiptap [data-hs-editor-underline]',      fn: () => editor.chain().focus().toggleUnderline().run()    },    {      id: '#hs-editor-tiptap [data-hs-editor-strike]',      fn: () => editor.chain().focus().toggleStrike().run()    },    {      id: '#hs-editor-tiptap [data-hs-editor-link]',      fn: () => {        const url = window.prompt('URL');        editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run();      }    },    {      id: '#hs-editor-tiptap [data-hs-editor-ol]',      fn: () => editor.chain().focus().toggleOrderedList().run()    },    {      id: '#hs-editor-tiptap [data-hs-editor-ul]',      fn: () => editor.chain().focus().toggleBulletList().run()    },    {      id: '#hs-editor-tiptap [data-hs-editor-blockquote]',      fn: () => editor.chain().focus().toggleBlockquote().run()    },    {      id: '#hs-editor-tiptap [data-hs-editor-code]',      fn: () => editor.chain().focus().toggleCode().run()    }  ];  actions.forEach(({ id, fn }) => {    const action = document.querySelector(id);    if (action === null) return;    action.addEventListener('click', fn);  });</script>
```

--------------------------------

### Verify Preline MCP server connection

Source: https://preline.co/docs/mcp-devin.html

Start a new Devin CLI session and confirm Devin sees the server. You should see 'preline' listed. Use 'devin mcp get preline' for the full entry, or 'devin mcp disable preline' / 'devin mcp enable preline' to toggle it without removing the configuration.

```bash
devin mcp list
```

--------------------------------

### Custom TipTap blockquote node and editor setup

Source: https://preline.co/docs/components/text-editor.html

This snippet defines a custom blockquote node with a node view that adds an SVG icon and a content wrapper, then initializes a TipTap editor with that node and several extensions. It also sets up toolbar actions for bold, italic, and underline. Use this as a complete example for a rich text editor with a styled blockquote.

```javascript
import StarterKit from 'https://esm.sh/@tiptap/starter-kit';
import Placeholder from 'https://esm.sh/@tiptap/extension-placeholder';
import Paragraph from 'https://esm.sh/@tiptap/extension-paragraph';
import Bold from 'https://esm.sh/@tiptap/extension-bold';
import Underline from 'https://esm.sh/@tiptap/extension-underline';
import Link from 'https://esm.sh/@tiptap/extension-link';
import BulletList from 'https://esm.sh/@tiptap/extension-bullet-list';
import OrderedList from 'https://esm.sh/@tiptap/extension-ordered-list';
import ListItem from 'https://esm.sh/@tiptap/extension-list-item';

const CustomBlockquote = Node.create({
  name: 'customBlockquote',
  group: 'block',
  content: 'block+',
  defining: true,

  parseHTML() {
    return [{ tag: 'blockquote' }]
  },

  addOptions() {
    return {
      HTMLAttributes: {},
    }
  },

  addNodeView() {
    return ({ node }) => {
      const blockquote = document.createElement('blockquote');
      Object.entries(this.options.HTMLAttributes).forEach(([key, value]) => {
        blockquote.setAttribute(key, value);
      });

      const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
      svg.setAttribute('class', 'absolute top-0 inset-s-0 size-16 text-gray-100 dark:text-neutral-700');
      svg.setAttribute('width', '16');
      svg.setAttribute('height', '16');
      svg.setAttribute('viewBox', '0 0 16 16');
      svg.setAttribute('fill', 'none');
      svg.setAttribute('aria-hidden', 'true');

      const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
      path.setAttribute('d', 'M7.39762 10.3C7.39762 11.0733 7.14888 11.7 6.6514 12.18C6.15392 12.6333 5.52552 12.86 4.76621 12.86C3.84979 12.86 3.09047 12.5533 2.48825 11.94C1.91222 11.3266 1.62421 10.4467 1.62421 9.29999C1.62421 8.07332 1.96459 6.87332 2.64535 5.69999C3.35231 4.49999 4.33418 3.55332 5.59098 2.85999L6.4943 4.25999C5.81354 4.73999 5.26369 5.27332 4.84476 5.85999C4.45201 6.44666 4.19017 7.12666 4.05926 7.89999C4.29491 7.79332 4.56983 7.73999 4.88403 7.73999C5.61716 7.73999 6.21938 7.97999 6.69067 8.45999C7.16197 8.93999 7.39762 9.55333 7.39762 10.3ZM14.6242 10.3C14.6242 11.0733 14.3755 11.7 13.878 12.18C13.3805 12.6333 12.7521 12.86 11.9928 12.86C11.0764 12.86 10.3171 12.5533 9.71484 11.94C9.13881 11.3266 8.85079 10.4467 8.85079 9.29999C8.85079 8.07332 9.19117 6.87332 9.87194 5.69999C10.5789 4.49999 11.5608 3.55332 12.8176 2.85999L13.7209 4.25999C13.0401 4.73999 12.4903 5.27332 12.0713 5.85999C11.6786 6.44666 11.4168 7.12666 11.2858 7.89999C11.5215 7.79332 11.7964 7.73999 12.1106 7.73999C12.8437 7.73999 13.446 7.97999 13.9173 8.45999C14.3886 8.93999 14.6242 9.55333 14.6242 10.3Z');
      path.setAttribute('fill', 'currentColor');
      svg.appendChild(path);
      blockquote.appendChild(svg);

      const contentWrapper = document.createElement('div');
      contentWrapper.classList.add('relative', 'z-10', 'italic');
      blockquote.appendChild(contentWrapper);

      return {
        dom: blockquote,
        contentDOM: contentWrapper
      }
    }
  }
});

const editor = new Editor({
  element: document.querySelector('#hs-editor-tiptap-blockquote-alt [data-hs-editor-field]'),
  editorProps: {
    attributes: {
      class: 'relative min-h-40 p-3'
    }
  },
  extensions: [
    StarterKit.configure({
      blockquote: false,
      history: false
    }),
    Placeholder.configure({
      placeholder: 'Add a message, if you\'d like.',
      emptyNodeClass: 'before:text-muted-foreground-1'
    }),
    Paragraph.configure({
      HTMLAttributes: {
        class: 'text-sm text-foreground'
      }
    }),
    Bold.configure({
      HTMLAttributes: {
        class: 'font-bold'
      }
    }),
    Underline,
    Link.configure({
      HTMLAttributes: {
        class: 'inline-flex items-center gap-x-1 text-blue-600 decoration-2 hover:underline focus:outline-hidden focus:underline font-medium dark:text-white'
      }
    }),
    BulletList.configure({
      HTMLAttributes: {
        class: 'list-disc list-inside text-foreground'
      }
    }),
    OrderedList.configure({
      HTMLAttributes: {
        class: 'list-decimal list-inside text-foreground'
      }
    }),
    ListItem.configure({
      HTMLAttributes: {
        class: 'marker:text-sm'
      }
    }),
    CustomBlockquote.configure({
      HTMLAttributes: {
        class: 'relative sm:[&>div>p]:text-xl pt-6 pb-4 pe-4 ps-8'
      }
    })
  ]
});

const actions = [
  {
    id: '#hs-editor-tiptap-blockquote-alt [data-hs-editor-bold]',
    fn: () => editor.chain().focus().toggleBold().run()
  },
  {
    id: '#hs-editor-tiptap-blockquote-alt [data-hs-editor-italic]',
    fn: () => editor.chain().focus().toggleItalic().run()
  },
  {
    id: '#hs-editor-tiptap-blockquote-alt [data-hs-editor-underline]',
    fn: () => editor.chain().focus().toggleUnderline().run()
  },
]
```

--------------------------------

### Install @tailwindcss/forms plugin

Source: https://preline.co/docs/frameworks-rails.html

Install the Tailwind CSS Forms plugin, which Preline UI uses across form components. This is required if not already installed.

```bash
npm install -D @tailwindcss/forms
```

--------------------------------

### Install Preline and copy browser assets to public/javascripts

Source: https://preline.co/docs/guides/express.html

Installs the preline package, creates the public/javascripts directory, and copies the browser files preline.js and non-auto.mjs into it. Use this to serve only the specific browser files you reference instead of exposing the whole node_modules or dist directory.

```bash
npm install preline
mkdir -p public/javascripts
cp node_modules/preline/dist/preline.js public/javascripts/preline.js
cp node_modules/preline/dist/non-auto.mjs public/javascripts/non-auto.mjs
```

--------------------------------

### Initialize Preline UI in Astro layout with HSStaticMethods.autoInit()

Source: https://preline.co/docs/guides/astro.html

Place this script in a shared layout to initialize Preline UI on every page. It uses the non-auto entry to avoid timing issues and re-initializes on astro:page-load to support View Transitions.

```astro
---
import "../styles/global.css";
---
<slot />
<script>
  import { HSStaticMethods } from "preline/non-auto";
  function init() {
    HSStaticMethods.autoInit();
  }
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", init);
  } else {
    init();
  }
  document.addEventListener("astro:page-load", init);
</script>
```

--------------------------------

### Install Preline UI in theme/static_src

Source: https://preline.co/docs/frameworks-django.html

Run these commands inside theme/static_src/ where django-tailwind placed its package.json. The npm install command installs the preline package, and the optional command installs the Tailwind CSS Forms plugin used by Preline UI form components.

```bash
cd theme/static_src
npm install preline

```

```bash
npm install -D @tailwindcss/forms

```

--------------------------------

### Import full Preline package and auto-init multiple components

Source: https://preline.co/docs/guides/html-vite.html

Imports HSDropdown, HSOverlay, and HSStaticMethods from 'preline/non-auto' and calls autoInit for dropdown and overlay. Then closes a dropdown and opens an overlay by ID.

```TypeScript
import { HSDropdown, HSOverlay, HSStaticMethods } from "preline/non-auto";HSStaticMethods.autoInit(["dropdown", "overlay"]);HSDropdown.close("#actions-menu");HSOverlay.open("#settings-modal");
```
Tokens:
Raw