A native Preline session planner with linked tabs, a constrained input-number plugin, installed theme aliases, real Tailwind scales and a local materials estimate that updates with the selected session.
Preline 4.2.0 HSTabs and HSInputNumber with Tailwind CSS 4.3.3 and the packaged default theme. · Implementation reference
02
Preline UI Design System Design Reference
Preline npm 4.2.0 with Tailwind CSS 4.3.3; default theme from the installed package. The marketing/docs site can show a newer release banner, so the executable example is explicitly pinned. Theme aliases remain aliases; no guessed hexadecimal conversions.
Preline UI Design System Preline Combines Utility Markup with Behavior Plugins
Preline Combines Utility Markup with Behavior Plugins
The planner uses two native Preline plugins: HSTabs selects a session panel, and HSInputNumber manages bounded increment and decrement controls. Tailwind classes supply most visual treatment. The original session illustration and budget calculation belong to the application rather than to a fictional all-in-one booking component.
This distinction matters when copying the example. Installing the JavaScript package alone does not compile the utility classes or supply the application’s markup. Conversely, copying the HTML without initializing the plugins leaves tab and number behavior incomplete. The full integration below supplies each part explicitly.
Preline UI Design System Read Semantic Aliases Through to Their Palette Roles
Read Semantic Aliases Through to Their Palette Roles
In the packaged default light theme, --primary refers to --color-primary-600, whose underlying primary ramp is blue. The primary foreground resolves to white; hover, focus and active use the seven-hundred role. The selected tab and Save action share that family through semantic utility classes.
Cards use --card and --card-line, while the quantity field uses --layer and --layer-line. Keeping those roles separate makes future theme changes more predictable than scattering literal white and gray classes everywhere. The table preserves official aliases instead of presenting computed approximations as source tokens.
Preline UI Design System Use Tailwind’s Real Scale and Mark Original Exceptions
Use Tailwind’s Real Scale and Mark Original Exceptions
The page title and estimate use text-3xl, the session title uses text-2xl, and form copy uses text-sm. Card padding p-5 equals 1.25rem under the default spacing unit. The larger sm:p-8 page inset starts at Tailwind’s 640px small breakpoint, while the original grid switches to one column at 760px.
The local stylesheet uses system-ui and does not fetch the optional custom fonts named in Preline’s theme file. At 280px, tabs wrap onto two rows and the group card moves below the session. Those are deliberate application composition choices rather than a claim that every Preline layout has this geometry.
Preline UI Design System Keep Tab Controls and Panels Linked by Stable IDs
Keep Tab Controls and Panels Linked by Stable IDs
Each tab has data-hs-tab pointing to one unique panel. The tab’s aria-controls and the panel’s aria-labelledby repeat that relationship for assistive technology. Exactly one initial tab carries active and aria-selected=true, and the other panels begin hidden. Native HSTabs updates those states as the user navigates.
The active visual style uses hs-tab-active:bg-primary and hs-tab-active:text-primary-foreground. Those variants come from Preline’s variants.css, so omitting that import can make the selected state visually ambiguous even when the JavaScript changes classes correctly. The application observes selection changes to refresh the adjacent summary.
Select Clay workshop and confirm its title, materials and duration.
Increase Participants from two to three and verify the $54 estimate.
Save the local plan, then change a tab to clear the old confirmation.
Preline UI Design System Plugin Options and Input Constraints Must Agree
Plugin Options and Input Constraints Must Agree
The quantity wrapper sets min one, max six and step one in data-hs-input-number. The native number input repeats those constraints. This gives both the plugin buttons and browser validity the same allowed domain instead of letting a typed number bypass a limit that only exists in the button handler.
The summary listens to input, change and the plugin’s change callback. Invalid manual input replaces the total with an em dash and disables Save; the save handler also calls reportValidity before reading the value. The six-person limit is a sample planning constraint, not a claim about real availability.
Preline UI Design System Calculate from the Active Panel Instead of Stale Labels
Calculate from the Active Panel Instead of Stale Labels
Each panel stores a stable session name, price and duration as data attributes. The update function reads the visible panel and multiplies its allowance by the valid group size. This makes Print studio, Clay workshop and Drawing walk genuinely distinct choices rather than tabs that reveal the same placeholder card.
The displayed estimate includes materials only. The original descriptions state what the allowance represents, and the page explicitly says it does not book a place. There is no payment, inventory check or external schedule behind the numbers. A real booking flow would need those separate systems and server validation.
Preline UI Design System Use the Exported Manual Entry in This Package Version
Use the Exported Manual Entry in This Package Version
The verified 4.2.0 package exposes named HSTabs and HSInputNumber exports from preline/non-auto. The example imports them and calls their autoInit methods after the markup exists. Despite the name, autoInit here is an explicit scan invoked by the application, not an implicit full-package page-load hook.
During verification, the per-plugin .mjs paths did not expose a default class, and bare imports from those paths were removable under package side-effect metadata. Using the exported manual entry resolved that concrete build issue. The setup therefore shows the working versioned import rather than an untested generic plugin import.
Preline UI Design System Make Confirmation Expire When the Plan Changes
Make Confirmation Expire When the Plan Changes
Save local plan writes a status sentence containing the exact session, count and materials total, then disables itself. Any quantity edit or selected-tab change calls update, restoring the normal explanatory message and recalculating whether saving is allowed. A previously saved sentence cannot remain attached to a new plan.
The local test selected Clay workshop, increased the count to three and checked the resulting $54 status. It also inspected the actual rendered page at 280px. A static total or a button that merely changes its own label would not prove that the two native plugins and the application state are connected.
Use a status region for the precise local result.
Keep invalid values out of the calculated total.
Retain stable tab/panel IDs when adapting the markup.
Preline UI Design System Compile the Theme, Variants and Actual Source Markup
Compile the Theme, Variants and Actual Source Markup
The stylesheet imports Tailwind first, then Preline variants and the packaged default theme. Explicit source paths include the local HTML, application JavaScript and Preline distribution files, so state-dependent utilities are available in the generated CSS. The original layout stylesheet follows those imports.
The standalone preview inlines the compiled CSS and bundled JavaScript and makes no CDN request. A production project can serve the same outputs as separate files. Keep file paths relative to the actual CSS entry; the reproducible example below puts all source files at the project root to avoid hidden temporary-workspace dependencies.
This stylesheet follows the Tailwind and Preline imports.
04
Preline UI Design System Agent Setup
Implementation Starting Point
Verified native Preline 4.2.0. The complete markup, logic and CSS are supplied above. The input.css source paths assume all four source files are at the project root.
bash
# Create an empty directory and run:
npm init -y
npm install [email protected][email protected] @tailwindcss/[email protected] esbuild
# Save the complete examples above as body.html, app.js and style.css.
# Create input.css with exactly:
# @import "tailwindcss" source(none);
# @import "./node_modules/preline/variants.css";
# @import "./node_modules/preline/css/themes/theme.css";
# @source "./body.html";
# @source "./app.js";
# @source "./node_modules/preline/dist/*.js";
# @import "./style.css";
npx @tailwindcss/cli -i input.css -o bundle.css --minify
npx esbuild app.js --bundle --format=iife --outfile=bundle.js
# Assemble the actual root document without placeholder markup:
node -e 'const f=require("fs");f.writeFileSync("index.html",`<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Studio planner</title><link rel="stylesheet" href="bundle.css"></head><body>${f.readFileSync("body.html","utf8")}<script src="bundle.js"></script></body></html>`)'
# Serve this directory with your existing static server.
A Prompt for Your Project
Agent Prompt
Use Preline 4.2.0 with named HSTabs and HSInputNumber imports from preline/non-auto and explicitly initialize both plugins. Preserve the three Studio Saturday workshops, the one-to-six quantity range and the selected workshop’s material cost. Derive the total from the active panel and quantity, invalidate the saved plan after either changes, and validate the numeric range before saving locally. Include the supplied Tailwind theme/variants setup and original layout. Do not convert the local studio plan into a booking or payment confirmation.
05
Preline UI Design System Sources and Scope
Native Preline npm 4.2.0 with Tailwind CSS 4.3.3. Original session descriptions, illustrations and fictional materials allowances. Save stores only local page state; no booking, payment or external message occurs.
