Getting started
Overview
CSS and Vanilla JavaScript components for plain HTML, scoped to a root and themed with tokens.
Start with Installation: load one CSS mode, Clean or Prefixed, and add the Browser or ESM runtime for interactive components. Every component has its own page under Components, and form controls under Forms.
Getting started
Foundations
- Core and lifecycleThe root scope, the runtime API and the init and destroy lifecycle shared by every component.
- LayoutBreakpoints, the container, and page layouts with the Tailwind CSS grid and flex utilities.
- UtilitiesTailwind CSS utilities with Tailwind CSS's names and values: layout, spacing, sizing, text, color, borders, position and more.
- Tokens and themesThe palette, semantic and component CSS variables, light, dark and auto themes, and overrides from a root or one element.
- Style guideShared appearance and deliberate adaptations of the shadcn/ui reference.
- IconsIcons as classes, in the text's size and color, from Tabler Icons; the components' icon slots and icon-only controls.
Advanced
- Asset loadingThe Full, Core, component and extension files, their formats, and the order to load them in.
- Dialogs from JavaScriptPLF.Dialog.fire() confirms an action or reports a result with SweetAlert's options, on dialogs the script creates.
- Page transitionsSmooth page changes for multi-page sites with the browser's cross-document view transitions, in plain CSS.
Integrations
- OverviewHow Pelatform UI loads in WordPress, Elementor, Astro and React, and keeps the content they change started.
- AstroUse the package exports in an Astro site.
- ReactUse the React components in Next.js, Astro and a WordPress plugin, styled by the same stylesheets as the HTML.
- WordPressEnqueue the built files where a page needs them, as any stylesheet and script, and keep Elementor widgets started.
- AI agentsHow a coding agent, such as Claude Code, builds a project's screens with Pelatform UI, and the lines to put in its instructions.
Release status
Version 0.1.0 is unreleased. Automated browser tests do not replace the checks still outstanding: the supported browsers on real devices, screen readers, and real WordPress and Elementor sites.