Getting started

Installation and modes

Load Pelatform UI in a plain HTML page or a package project, and choose Clean or Prefixed CSS.

A page needs one stylesheet and, for interactive components, one script. Start from this page, with the files beside it:

HTML

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My page</title>
  <link rel="stylesheet" href="core/pelatform-ui-preflight.min.css">
  <link rel="stylesheet" href="pelatform-ui.min.css">
  <script src="pelatform-ui.min.js" defer></script>
</head>
<body data-plf-root>
  <button class="btn btn-primary">Save</button>
</body>
</html>

The first stylesheet, Preflight, resets the browser’s styles inside the root.

pelatform-ui.css is Clean. For prefixed visual classes, plf:btn instead of btn, choose pelatform-ui.prefixed.css or its minified alternative. The root attribute, tokens, hooks, events and JavaScript APIs stay identical. Load one mode, one runtime format and one version per document. Normal and minified files are alternatives. Component pages do not repeat loading steps: Full includes every standard component, and the component asset table lists the files for loading them one by one.

Pelatform UI styles only apply inside an element with data-plf-root. It is not a visual box: it scopes the styles away from other CSS on the page and holds the theme and token overrides. Put it once on <body>, as above, or your application’s wrapper; the examples in these docs leave it out. Examples use Clean CSS; the Clean | Prefixed toggle on a component page switches its class table and code. Actions in the live examples, such as status messages, come from consumer code that is not part of the library.

Get the files

Pelatform UI is not published on its own yet: its files come with the products built on it, which load them. In WordPress, such a product registers them for the plugins that extend it (Extend a product).

Browser support

Pelatform UI is built for the two latest versions of Chrome, Edge, Firefox and Safari. Its colors use light-dark(), which Chrome and Edge 123, Firefox 120 and Safari 17.5 introduced; an older browser shows the components without their colors.

Choose a CSS mode

Mode	Use it when	Visual classes
Clean	The page’s CSS is yours: plain HTML pages and applications without another CSS framework	`btn`, `card`, `flex`, `md:hidden`
Prefixed	The page shares CSS with other systems: WordPress or Elementor themes and plugins, Tailwind CSS, or other frameworks and legacy styles	`plf:btn`, `plf:card`, `plf:flex`, `plf:md:hidden`

Clean is the default and is what this website uses. Some Clean names are also Tailwind CSS classes with other styles: table, and prose from its Typography plugin. Inside a root, an element with one of those Tailwind classes also receives Pelatform UI’s styles, so use Prefixed alongside Tailwind.

In a project with a bundler, install the package (Get the files) and import its exports:

TypeScript

import '@pelatform/ui/css';
import {init, destroy, Modal} from '@pelatform/ui';
// Run in a client entry after markup is available.
init(document);
Modal.getOrCreateInstance(dialog)?.open();
// Before replacing owned content:
destroy(container);

Use @pelatform/ui/css/prefixed with canonical visual classes.

Behavior	ESM imports	Browser script
`window.PLF`	Never attached	Attached
Starts itself	Never	The Full script initializes once; Core and component scripts need `PLF.init()`
Without a DOM	Safe to import; DOM methods require a browser	Needs a browser
Extensions	Register one with `use()` before `init()` (Extensions)	An extension script after the Full script starts its own elements

Core covers lifecycle and ownership.

Preflight

Preflight removes the browser’s default margins and other styles inside roots only; the rest of the page keeps its own styles.
For example, a theme’s h2 { margin: 40px 0 } and a { color: orange } reach a heading and a link in your screen without Preflight; with it, both start from zero inside the root, while the theme’s headings and links outside it keep those rules.
Spacing then comes from utilities such as gap and space-y-4, as in the live examples and the blocks.
Load it before the library CSS, as the page above does: core/pelatform-ui-preflight.min.css, or @pelatform/ui/preflight/css with a bundler.
Beside a site’s own CSS, such as a WordPress theme’s, it keeps your screens as they look here (WordPress).
Text that should keep the site’s paragraph and heading spacing goes outside the roots, in prose, or in site content (data-plf-site), such as a page’s content in a dashboard layout.

Icons

Icon classes, <span class="icon icon-arrow-right"></span>, take their icons from a stylesheet loaded after the library CSS: icons/icons.min.css for the outline icons and icons/icons-filled.min.css for the filled ones, or @pelatform/ui/icons/css and @pelatform/ui/icons-filled/css with a bundler. Icons shows how to use them, and the Icons page lists them all.

Beyond the set

Pelatform UI ships components, their JavaScript and a set of utilities with Tailwind CSS’s names and values. For any other utility or variant, such as bg-red-500 or group-hover:underline, use your own Tailwind CSS beside the library. Its class names match Clean CSS; for Prefixed CSS, build it with @import "tailwindcss" prefix(plf); so its classes read plf:bg-red-500. Without a build step, Tailwind CSS’s browser build (@tailwindcss/browser) generates them in the page, for prototypes only.

In your own Tailwind CSS 4 build, import the theme after Tailwind CSS, with prefix(plf) too, so your utilities read the tokens:

CSS

@import "tailwindcss";
@import "@pelatform/ui/tailwind";

Inside a root, utilities such as bg-primary, text-base-content, p-4 and rounded-lg then follow its theme and overrides, with the color names of the color utilities; outside a root they keep Tailwind CSS’s values, and the colors, which Tailwind CSS does not have, stay unset. The theme adds names and changes nothing else, such as your palette and breakpoints; your own @theme after it wins for the names it sets.

Root font size

Sizes are rem, as Tailwind CSS’s are, so they follow the reader’s browser font size. A host page whose root font size is not 100%, such as a theme with html { font-size: 62.5% }, would shrink them too; set --plf-rem: 1.6rem on the root there (1 ÷ 0.625), and components and utilities return to their normal size. Breakpoints and container widths stay on the browser’s rem.

HTML

<div data-plf-root style="--plf-rem: 1.6rem">…</div>

Class names

A class name tells you what it styles. Components use daisyUI-style names:

Example	Meaning
`btn`, `prose`, `card`	Component: the base class on a component’s main element
`btn-sm`, `badge-outline`	Modifier: a variant or size beside the base class
`btn-label`, `card-body`	Part: an element inside a component
`flex`, `font-bold`, `container`	Utility: one style, with its Tailwind CSS name and value; see Utilities
`md:flex`	Breakpoint utility: the utility from the md breakpoint up

Prefixed CSS adds plf: to every visual class, components and Tailwind CSS utilities alike: plf:btn, plf:card-body, plf:md:flex.

Attributes, variables and events keep the same names in both modes; they start with data-plf-, --plf- and plf::

Example	Meaning
`data-plf-modal`	Attribute: the root, `data-plf-root`, or a marker or option for JavaScript
`--plf-button-bg`	Variable: a token to override on a root or an element
`plf:modal:open`	Event: dispatched by a component

Variables that start with --_plf- are internal; do not set them.