Create a responsive UI block named "Currency and Budget Settings Form" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.
Implementation preflight:
- Exact public block reference: https://preline.co/blocks/forms/pages-and-settings/#currency-and-budget-settings-form. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.
Build only this source block. Do not add unrelated page chrome, marketing sections, dashboard widgets, extra cards, extra modals, placeholder states, or footer content unless they are present in the source block.
Source metadata:
- Catalog family: forms/pages-and-settings
- Block ID: currency-and-budget-settings-form
- Source description: Sidebar settings panel stacks searchable currency selects, a locale select, paired limit fields, and a save row.
- Preview iframe: https://preline.co/blocks/forms/pages-and-settings/iframes/pro/currency-and-budget-settings-form.html (repo path: blocks/forms/pages-and-settings/iframes/pro/currency-and-budget-settings-form.html)
- Source markup reference:
- partials/pro/finance-tracker/sources/currency-budget.html
Use the source HTML tab and referenced partials as the source of truth. Preserve exact visible copy, content order, hierarchy, component density, spacing relationships, borders, radii, icons, status markers, dropdown/menu rows, form states, responsive order, and interaction content. If the source imports shared partials or assets, reuse those local components/assets when the destination can import them; otherwise recreate their visible structure faithfully from the source.
Block-specific fidelity rules:
- Preserve labels, helper text, validation/error states, required markers, input grouping, focus behavior, control sizes, option order, selected/disabled states, and submit/cancel hierarchy.
- For selects, comboboxes, radios, checkboxes, switches, and upload controls, keep source trigger/control geometry and do not normalize intentionally different controls into generic pills or cards.
- Source content inventory (from the source markup):
- The block is a bare sidebar-rail panel with no card wrapper: an `
` reading `Currency & budget`, then `
` reading `Totals, charts and budgets read in the display currency. Purchases keep the currency you paid in.`, then a single `
` holding every control. It is designed to sit on a `bg-sidebar` surface, so do not add a panel background, border, or shadow of its own.
- Field order inside the stack is: `Display currency`, `Usually paid in`, `Number & date format`, a two-column `Daily limit` / `Monthly budget` pair, a standalone helper line, and the save row.
- Every label is `block text-xs font-medium text-foreground` and is wired to its control with `for`/`id`; the only helper text below a control is `Pre-selected when adding an expense.` under `Usually paid in`, plus the standalone `Leave a field at 0 to turn that target off.` line above the save row. Both are `text-xs text-muted-foreground-1`.
- `Display currency` and `Usually paid in` are two Preline advanced selects (`data-hs-select`, HSSelect) over `class="hidden"` native `
Create a full-page job application form component named "Job Application Form" that visually matches the reference as closely as possible. Use the current project's existing framework, styling conventions, tokens, components, form controls, icons, routing, and dark-mode strategy. Do not add external UI dependencies just to recreate the form or layout.
Implementation preflight:
- Exact public block reference: https://preline.co/blocks/forms/pages-and-settings/#job-application-form. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.
Baseline fidelity gates:
- Preserve exact visible copy, data values, order, hierarchy, and default state unless the user explicitly asks to change them.
- Map semantic token roles to one coherent destination token vocabulary. Every source primary role must use the destination project's primary token/config, never Preline blue or fixed blue palette values unless the destination primary is explicitly blue.
- Verify every emitted utility or component class exists in the destination. Map or define a missing semantic token before use; do not leave any undefined source class in generated markup.
- Use exact source assets, image URLs, inline SVGs, avatars, logos, and brand marks when supplied; do not replace them with placeholders, initials, emojis, generic icons, or alternate stock media.
- Final QA: compare the implementation with the exact anchored Preview and HTML source at mobile and desktop widths, including open/alternate states, assets, layering, focus behavior, and dark mode.
Behavior runtime rule:
- For source behavior powered by Preline JS or a third-party package, inspect installed dependencies and existing primitives first. Reuse a destination primitive only when it can preserve the source geometry, states, accessibility, and behavior.
- Treat new dependencies as allowed by default unless the user, repository instructions, or package policy explicitly prohibit them. When no faithful equivalent exists, install/use the Preline UI runtime/plugin or the exact source third-party package; do not silently substitute ad hoc JavaScript or custom React state.
- Only under an explicit dependency prohibition may you implement a scoped framework-native equivalent. It must preserve keyboard and focus management, placement and layering, responsive behavior, and accessibility; static or simplified approximations are not acceptable.
The details below are derived from the actual source block. Do not infer this from a generic job application page, profile form, checkout form, or résumé upload component. The source is a two-column application page with a back/job link, a numbered timeline form on the left, and a sticky testimonial card on the right.
Keep the implementation Tailwind-first in Tailwind projects. Use utility classes directly in markup and reuse existing project component classes only when they already exist. Do not create new one-off classes such as `.application-form`, `.timeline-step`, `.form-row`, `.testimonial-card`, or `@layer components` rules just to style this block.
Preserve source scale/layout utilities where the destination Tailwind setup supports them, and map missing custom scale values to the closest existing project scale or to a reusable theme token. Do not replace source scale with scattered arbitrary bracket utilities. Source scale/layout examples for this block include `max-w-5xl`, `px-4`, `xl:px-0`, `py-5`, `sm:py-10`, `mx-auto`, `mb-10`, `mb-5`, `inline-flex`, `items-center`, `gap-x-2`, `text-sm`, `size-4`, `transition`, `font-semibold`, `text-2xl`, `lg:text-3xl`, `grid`, `md:grid-cols-7`, `gap-10`, `lg:gap-20`, `md:col-span-4`, `md:col-span-3`, `md:sticky`, `md:top-20`, `flex`, `gap-x-5`, `ms-1`, `size-8`, `rounded-full`, `pt-0.5`, `pb-8`, `sm:pb-12`, `space-y-3`, `mt-10`, `flex-col`, `gap-y-5`, `py-2.5`, `px-3`, `rounded-lg`, `sm:text-sm`, `sm:py-3`, `sm:px-4`, `rows="3"`, `size-4`, `shadow-2xs`, `py-2`, `px-3`, `rounded-full`, `p-2`, `rounded-2xl`, `w-full`, `h-80`, `object-cover`, `rounded-xl`, `p-4`, `gap-3`, and `md:text-lg`.
Separate Tailwind scale from source token class names. Source token classes such as `bg-background`, `text-primary`, `text-foreground`, `text-muted-foreground-1`, `border-line-2`, `bg-layer`, `border-layer-line`, `text-layer-foreground`, `focus:border-line-3`, `focus:ring-line-3`, `bg-surface`, `border-primary-line`, `text-primary-foreground`, `checked:bg-primary-checked`, and `checked:border-primary-checked` describe roles. Map those roles to the destination project's actual token vocabulary. Do not copy Preline-only token names unless those exact classes already exist in the destination project.
Use one token vocabulary consistently. In common Tailwind/shadcn-style projects, use native tokens such as `bg-background`, `bg-card`, `border-border`, `text-foreground`, `text-muted-foreground`, `bg-primary`, `text-primary`, `text-primary-foreground`, `ring-ring`, and `text-destructive` when available. In tokenized Tailwind projects, combine structural utilities with semantic token utilities; do not use raw palette classes like `text-gray-900`, `text-gray-500`, `bg-white`, `bg-gray-50`, `dark:bg-gray-950`, `border-gray-200`, `bg-blue-600`, or `ring-indigo-600` for colors, surfaces, borders, focus rings, or selected states when semantic tokens exist. In Bootstrap projects, use native Bootstrap layout and form classes or variables such as `.container`, `.row`, `.col-md-*`, `.form-label`, `.form-control`, `.form-check-input`, `.btn`, `.btn-primary`, `.card`, `.text-body`, `.text-muted`, `.border`, `.rounded-*`, `--bs-primary`, and `--bs-primary-rgb`, including any app override such as a green/teal primary. Do not mix Preline token names, shadcn token names, Bootstrap classes, raw Tailwind palette colors, inline styles, and newly invented token classes in the same component.
Build only this job application form and its source-included testimonial sidebar. Do not append unrelated Tailwind UI sample sections, marketing CTAs, extra testimonials, page headers, footers, analytics cards, or extra demo blocks around it.
Overall page:
- Full-width page section with a background token role, not a floating card.
- Source outer wrapper scale/layout: `bg-background`.
- Source content container: `w-full max-w-5xl px-4 xl:px-0 py-5 sm:py-10 mx-auto`.
- The page is compact but has real vertical breathing room. Do not turn it into a centered modal, wizard card, or tiny form card.
- Implement intentional dark mode for page background, text, inputs, borders, timeline connectors, primary states, file input button area, and testimonial surface.
Header:
- Header wrapper scale/layout: `mb-10`.
- Back/job link wrapper: `mb-5`.
- Back/job link text: `Senior frontend developer`.
- Link scale/layout/state: `group inline-flex items-center gap-x-2 font-medium text-sm decoration-2 hover:underline focus:outline-hidden focus:underline`.
- Link token role: primary link text and primary focus/hover treatment. In Bootstrap projects, use the destination `.text-primary` / `--bs-primary` color, not Preline blue unless the project primary is blue.
- Include a left arrow icon before the link text. It is an ordinary interface icon and may come from the destination icon system. Source icon scale is `size-4` with a slight hover/focus move to the left.
- Heading text: `Apply for this job`.
- Heading scale/token role: `font-semibold text-2xl lg:text-3xl`, foreground token.
Main grid:
- Source grid scale/layout: `grid md:grid-cols-7 gap-10 lg:gap-20`.
- Left form column: `md:col-span-4`.
- Right testimonial column: `md:col-span-3`.
- On mobile, the columns stack in source order: application form first, testimonial below.
- On medium and larger screens, the testimonial card sits in the right column and is sticky with `md:sticky md:top-20`.
- Do not center the form and remove the sidebar; the right testimonial is part of the block.
Timeline form structure:
- Render the left column as a numbered vertical timeline with three numbered steps and one final unnumbered submit-button row.
- Source timeline wrapper: ordered list with counter reset behavior, equivalent to `[counter-reset:list-item-1]`.
- Timeline step item scale/layout: `flex gap-x-5 ms-1`.
- Each of the first three steps has a left rail container with a vertical connector line and a numbered circle.
- Rail/connector visual:
- Connector line starts below the number circle around `top-8` and continues through the step body.
- Connector line token role: subtle border/divider.
- Source line uses an inline-start border and a tiny negative translation, equivalent to `after:absolute after:top-8 after:bottom-0 after:inset-s-4 after:-translate-x-[0.5px] after:border-s after:border-line-2`.
- Number circle:
- Scale/layout: `flex shrink-0 justify-center items-center size-8 border rounded-full`.
- Token roles: subtle border and primary text.
- Typography: `font-semibold text-xs uppercase`.
- Numbers are `1`, `2`, and `3`, generated by the ordered list/counter or explicit accessible text.
- Step body scale/layout: `grow pt-0.5 pb-8 sm:pb-12`.
- Step heading scale/token role: `text-base`, foreground token.
- Step description scale/token role: `text-sm`, muted token.
- The final submit row aligns with the timeline content and uses `flex gap-x-5 ms-1`, but it does not show another numbered circle.
Step 1: Personal details:
- Heading: `Personal details`.
- Description: `We'll need these details in order to be able to contact you.`
- Form field stack: `mt-10 flex flex-col gap-y-5`.
- Fields, in exact order:
- Label `First name`, text input.
- Label `Last name`, text input.
- Label `Email`, email input.
- Label `Phone`, tel input.
- Source input scale/layout: `py-2.5 px-3 block w-full rounded-lg sm:text-sm`.
- Input token roles: layer/input background, layer border, input foreground, muted placeholder, focus border/ring, disabled opacity and pointer state.
- Labels use `block mb-2 text-sm` and foreground token.
Step 2: Profile:
- Heading: `Profile`.
- Description: `Please provide your résumé/CV and a brief personal summary to help us get to know you better.`
- Field stack: `mt-10 flex flex-col gap-y-5`.
- Résumé/CV field:
- Label text is exactly `Résumé / CV`.
- Use a native file input unless the destination project already has a matching file-input component.
- Do not replace it with a drag-and-drop zone, uploader card, progress list, or upload button group.
- Source file input scale/layout: `block w-full rounded-lg sm:text-sm`.
- File input token roles: layer/input background, layer border, input foreground, muted placeholder, focus border/ring.
- Source file button area uses surface background, no file border, `file:me-4`, `file:py-3`, and `file:px-4`.
- Personal summary field:
- Label text: `Personal summary`.
- Textarea uses `rows="3"`.
- Source textarea scale/layout: `py-2.5 px-3 sm:py-3 sm:px-4 block w-full rounded-lg sm:text-sm`.
- Textarea token roles: layer/input background, layer border, input foreground, muted placeholder, focus border/ring, disabled state.
- Use the destination project's auto-height textarea behavior if it exists. In Preline, this is `data-hs-textarea-auto-height`. If the destination does not have an auto-height utility and dependencies are allowed, install/use the Preline-used auto-height behavior. Only add small scoped JavaScript to resize this textarea when the project explicitly forbids adding dependencies.
Step 3: Submit application consent:
- Heading: `Submit application`.
- Paragraph 1: `In order to contact you with future jobs that you may be interested in, we need to store your personal data.`
- Paragraph 2: `If you are happy for us to do so please click the checkbox below.`
- Consent wrapper scale/layout: `mt-3 flex flex-col gap-y-5`.
- Checkbox row: `flex items-center gap-x-3`.
- Checkbox is unchecked by default in the source.
- Checkbox scale/layout: `shrink-0 size-4 rounded-sm shadow-2xs`.
- Checkbox token roles: transparent default background, visible border, primary checked background/border, no visible offset ring in the source, disabled state.
- In Bootstrap projects, use the project's `.form-check-input:checked` / `--bs-primary` styling so the checkbox follows the app primary color.
- Checkbox label text: `Allow us to process your personal information.`
- Checkbox label scale/token role: `text-sm`, muted token.
Submit action:
- Button text: `Submit application`.
- Button appears as the final unnumbered item beneath the timeline steps.
- Source button scale/layout/state: `group inline-flex items-center gap-x-2 py-2 px-3 font-medium text-sm rounded-full focus:outline-hidden`.
- Token roles: primary background, primary border, primary foreground, primary focus.
- In Bootstrap projects, use the destination `.btn .btn-primary` or equivalent primary button so it follows `--bs-primary` / the app primary override, such as green/teal. Do not hardcode Preline blue.
- Do not add an icon to the submit button; the source button is text only.
Testimonial sidebar:
- Preserve the testimonial card exactly; it is not a placeholder and should not be swapped for a generic quote.
- Sidebar wrapper behavior: right column with `md:sticky md:top-20`.
- Card wrapper scale/layout: `bg-surface p-2 rounded-2xl`.
- Card surface token role: elevated/surface background.
- Image:
- URL: `https://images.unsplash.com/photo-1721333087252-e4cffc249d2d?q=80&w=480&h=480&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D`
- Source scale/layout: `w-full h-80 object-cover rounded-xl`.
- Alt text in the source is `Features Image`. If the destination project has stricter content standards, use meaningful alt text for the testimonial image while preserving the same image.
- Do not replace this with another Unsplash image, initials avatar, illustration, gradient, or generated image.
- Quote content wrapper: `p-4 flex flex-col justify-end gap-3`.
- Blockquote scale/token role: `md:text-lg`, foreground token.
- Quote text is exactly: `" Working with this team is seamless. A calm, professional environment where design and engineering decisions are taken seriously. "`
- Quote footer: `Marc Jucob`.
- Quote footer scale/token role: `mt-4 text-sm`, muted token.
Forms and semantics:
- Use labels connected to inputs with `for`/`id` or the destination framework's accessible form-field component.
- It is acceptable to implement the visible fields as one semantic application form while preserving the source's visual grouping. If you keep multiple form wrappers like the source partial, ensure submission behavior is still coherent in the destination application.
- Use appropriate input types: `text`, `email`, `tel`, `file`, textarea, checkbox, and submit button.
- Do not add extra required markers, validation messages, helper text, placeholders, select fields, LinkedIn/portfolio fields, or upload states unless the destination product explicitly requires them.
- Keep visible copy, field order, section order, and button text exact.
Theme and token mapping:
- Primary visual roles must match the destination project's primary token or component state. This includes the back link, timeline numbers, checked checkbox state, and submit button.
- In Bootstrap destinations, compare these against the project's `.btn-primary` / `--bs-primary` output; no Preline-blue leakage unless the destination primary is actually blue.
- Map source foreground, muted text, layer/input, surface, border, divider, focus, disabled, and primary roles to the destination token vocabulary.
- Avoid inline `style` attributes, arbitrary utility colors, repeated raw hex/rgb values, and newly invented token classes.
- If the project is blank and has no tokens, define a small reusable fallback token set once, then consume those tokens semantically through utilities.
Responsive behavior:
- Mobile: single column, page padding `px-4 py-5`, form first and testimonial below.
- Medium and up: 7-column grid, form spans 4 columns and testimonial spans 3 columns.
- Large/wide screens: preserve `max-w-5xl`, `lg:gap-20`, and `xl:px-0`.
- Testimonial becomes sticky only from medium screens upward.
- Do not make the sidebar fixed, overlayed, hidden, or above the form.
Accessibility:
- Use a semantic page heading for `Apply for this job`.
- Use an ordered list or equivalent accessible structure for the three numbered steps.
- Ensure the back/job link has a clear href or route action.
- Make the submit action a real submit button if the component is inside a form.
- Decorative icons such as the left arrow can be `aria-hidden="true"` when the link text already names the action.
- Preserve keyboard focus visibility for links, inputs, checkbox, file input, textarea, and submit button.
- File input should remain operable by keyboard and screen readers.
Final QA checklist:
- The result is a full-page application layout, not a modal, centered card, or generic account form.
- Header contains the primary back/job link `Senior frontend developer` with a left arrow and the heading `Apply for this job`.
- Desktop layout uses a 7-column grid: timeline form on the left and sticky testimonial card on the right.
- Timeline has exactly three numbered steps: `Personal details`, `Profile`, and `Submit application`.
- Step descriptions match the source exactly.
- Fields match exactly and in order: First name, Last name, Email, Phone, Résumé / CV, Personal summary, consent checkbox.
- The résumé field is a native file input, not a drag-and-drop uploader.
- The textarea starts at 3 rows and supports the destination's auto-height behavior when available.
- Consent checkbox label reads `Allow us to process your personal information.`
- Final button reads `Submit application`, is rounded-full/pill-like in Tailwind projects, and uses the destination primary color.
- In Bootstrap projects, the submit button, checked checkbox, timeline numbers, and primary link match `.btn-primary` / `--bs-primary`, such as green/teal when that is the app primary, not Preline blue.
- Testimonial image URL, quote text, and `Marc Jucob` footer are preserved.
- Generated Tailwind code preserves source scale/layout utilities where available, maps token roles to the destination token vocabulary, and does not mix Preline-only token names with another design system.
- In tokenized Tailwind projects, generated code uses semantic token classes for semantic color roles and does not mix in raw palette classes such as `text-gray-900`, `bg-white`, `dark:bg-gray-950`, `border-gray-200`, `bg-blue-600`, or `ring-indigo-600`.
- No unrelated Tailwind UI sample sections, marketing CTAs, extra testimonials, page headers, footers, analytics cards, or additional demo blocks are added.
- There are no one-off component classes created only for this block, no scattered raw hex/rgb values, no placeholder testimonial, and no extra fields or validation states.
Create a responsive UI block named "Personal Information Form" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.
Implementation preflight:
- Exact public block reference: https://preline.co/blocks/forms/pages-and-settings/#personal-information-form. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.
Build only this source block. Do not add unrelated page chrome, marketing sections, dashboard widgets, extra cards, extra modals, placeholder states, or footer content unless they are present in the source block.
Source metadata:
- Catalog family: forms/pages-and-settings
- Block ID: personal-information-form
- Source description: Checkout-style form groups contact fields, address rows, and delivery details in one card.
- Preview iframe: https://preline.co/blocks/forms/pages-and-settings/iframes/pro/personal-information-form.html (repo path: blocks/forms/pages-and-settings/iframes/pro/personal-information-form.html)
- Source markup reference:
- partials/pro/storefront/forms/personal-info-layout.html
- partials/pro/storefront/sources/user-details-list-group-with-divider.html
Use the source HTML tab and referenced partials as the source of truth. Preserve exact visible copy, content order, hierarchy, component density, spacing relationships, borders, radii, icons, status markers, dropdown/menu rows, form states, responsive order, and interaction content. If the source imports shared partials or assets, reuse those local components/assets when the destination can import them; otherwise recreate their visible structure faithfully from the source.
Block-specific fidelity rules:
- Preserve labels, helper text, validation/error states, required markers, input grouping, focus behavior, control sizes, option order, selected/disabled states, and submit/cancel hierarchy.
- For selects, comboboxes, radios, checkboxes, switches, and upload controls, keep source trigger/control geometry and do not normalize intentionally different controls into generic pills or cards.
- Source content inventory (from the source markup):
- Top group is an avatar row (`flex flex-wrap items-center gap-3`) with the exact Unsplash photo `https://images.unsplash.com/photo-1659482633369-9fe69af50bfb?...&w=320&h=320&q=80` at `size-14 rounded-full` next to a small outline `Upload photo` button with an upload icon; its `Thumbnail` label is `sr-only`.
- Below it are exactly 6 divider rows (`pt-5 mt-5 border-t border-line-2 md:first:pt-0 md:first:mt-0 md:first:border-t-0`), each a `flex justify-between items-center gap-x-5` of title + value on the left and an underlined text button on the right, in this order: `Name` / `James Collins`, `Email` / `jamescollins@site.so`, `Phone number` / `+(01) 222 333 444`, `Password` / `********`, `Two-factor authentication`, `Deactivate your account`.
- The `Two-factor authentication` row's value text is `Add a layer of security. Require a code in addition to your password.` and the `Deactivate your account` row's is `This will immediately delete all of your data. This action is not reversible, so please continue with caution.`, both at `text-[13px]`.
- Row buttons: the first four read `Edit` and swap to `Cancel` while expanded; the fifth reads `Turn on` and the sixth `Deactivate` (rendered `text-destructive`).
- The first four rows are Preline collapse panels - `hs-collapse-toggle` with `aria-expanded="false"` and `data-hs-collapse="#"` over a `hs-collapse hidden` region (ids `hs-pro-shapiclnm`, `hs-pro-shapiclem`, `hs-pro-shapiclph`, `hs-pro-shapiclps`); all four are collapsed on first load.
- Expanded panels use a `w-full max-w-xs space-y-2` stack ending in a secondary `Save changes` button: Name has one input prefilled `James Collins`, Email one prefilled `jamescollins@site.so`, Phone one prefilled `+(01) 222 333 444`, and Password three empty password inputs with placeholders `Old password`, `New password`, `Confirm new password`.
- The last two buttons carry `data-hs-overlay="#hs-pro-shn2fam"` and `data-hs-overlay="#hs-pro-chhdl"`, but the modal markup is NOT part of this block - keep the triggers and do not invent the overlays.
Token and Tailwind rules:
- Treat source token classes as semantic roles, not fixed class names to blindly copy.
- Map every source `primary` role to the destination project's current primary token/config/CSS variable. Active links, checked states, progress lines, focus rings, primary gradients, logo primary fills/strokes, and primary buttons must share that destination primary color.
- Do not hardcode Preline blue or emit `text-blue-*`, `bg-blue-*`, `border-blue-*`, `fill-blue-*`, `stroke-blue-*`, `from-blue-*`, `via-blue-*`, `to-blue-*`, or fixed blue hex/rgb values for primary roles unless the destination primary is explicitly blue.
- Before using source-only token classes such as `text-foreground-inverse`, `bg-layer`, `border-layer-line`, `bg-navbar`, `border-line-2`, `bg-dropdown`, or similar Preline tokens, inspect the destination Tailwind config, global CSS/theme variables, and existing components for an equivalent utility/token.
- Prefer existing destination utilities such as `text-white`, `text-primary-foreground`, `text-foreground`, `text-muted-foreground`, `bg-background`, `bg-card`, `bg-popover`, `border-border`, `bg-muted`, `bg-accent`, `ring-ring`, or app-specific tokens when they match the source role.
- If no equivalent exists, add the smallest project-appropriate token or utility before using it. Do not leave undefined source classes in the generated markup.
Asset and icon rules:
- Use exact source images, avatars, product media, branded SVGs, payment marks, channel logos, and app icons when the source provides them.
- Do not replace source assets with initials, emojis, generic icons, generated placeholders, or different stock media.
- Ordinary interface icons should match the destination icon system. If the project uses Lucide-style outline icons, keep the 24 viewBox, `fill="none"`, `stroke="currentColor"`, rounded caps/joins, and source stroke widths.
- Brand/source SVG shape is fixed content. Only map semantic colors such as primary fill/stroke to the destination token.
Behavior and accessibility:
- Preserve source interactions: links, buttons, dropdowns, tooltips, tabs, menus, drawers, modals, toggles, search, filters, form controls, validation states, loading/empty states, and open/closed defaults.
- For source behavior powered by Preline JS or a third-party package, inspect installed dependencies and existing primitives first. Reuse a destination primitive only when it can preserve the source geometry, states, accessibility, and behavior.
- Treat new dependencies as allowed by default unless the user, repository instructions, or package policy explicitly prohibit them. When no faithful equivalent exists, install/use the Preline UI runtime/plugin or the exact source third-party package; do not silently substitute ad hoc JavaScript or custom React state.
- Only under an explicit dependency prohibition may you implement a scoped framework-native equivalent. It must preserve keyboard and focus management, placement and layering, responsive behavior, and accessibility; static or simplified approximations are not acceptable.
- Use semantic HTML and accessible names. Keep `aria-current`, `aria-expanded`, `aria-haspopup`, `role`, labels, focus states, and keyboard behavior when the source exposes them or the destination primitive requires them.
- Desktop and mobile states must not overlap text, clip controls, or shift layout unexpectedly. Controls with icons, counters, badges, and labels should keep stable dimensions across hover/focus/active states.
Final QA:
- Compare the result against the source preview and HTML tab.
- Verify primary color follows the destination project, not Preline's default blue.
- Verify all emitted classes exist in the destination or are added deliberately.
- Verify responsive layout, focus states, dropdown/popover layering, long-text truncation, and source asset paths.
- Keep the final implementation scoped to this block and avoid unrelated refactors.
Upload photo
Name
James Collins
EditCancel
Save changes
Email
jamescollins@site.so
EditCancel
Save changes
Phone number
+(01) 222 333 444
EditCancel
Save changes
Password
********
EditCancel
Save changes
Two-factor authentication
Add a layer of security. Require a code in addition to your password.
Turn on
Deactivate your account
This will immediately delete all of your data. This action is not reversible, so please continue with caution.
Create a responsive UI block named "Account Preferences Form" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.
Implementation preflight:
- Exact public block reference: https://preline.co/blocks/forms/pages-and-settings/#account-preferences-form. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.
Build only this source block. Do not add unrelated page chrome, marketing sections, dashboard widgets, extra cards, extra modals, placeholder states, or footer content unless they are present in the source block.
Source metadata:
- Catalog family: forms/pages-and-settings
- Block ID: account-preferences-form
- Source description: Long settings form stacks language, time, billing, and account preference sections in one page.
- Preview iframe: https://preline.co/blocks/forms/pages-and-settings/iframes/pro/account-preferences-form.html (repo path: blocks/forms/pages-and-settings/iframes/pro/account-preferences-form.html)
- Source markup reference:
- partials/pro/admin-dashboard/cards/account-preferences.html
- partials/pro/admin-dashboard/layouts-components/input-style-inline-checkbox.html
- partials/pro/admin-dashboard/cards/image-card-selectable-checkbox-grid-view.html
Use the source HTML tab and referenced partials as the source of truth. Preserve exact visible copy, content order, hierarchy, component density, spacing relationships, borders, radii, icons, status markers, dropdown/menu rows, form states, responsive order, and interaction content. If the source imports shared partials or assets, reuse those local components/assets when the destination can import them; otherwise recreate their visible structure faithfully from the source.
Block-specific fidelity rules:
- Preserve labels, helper text, validation/error states, required markers, input grouping, focus behavior, control sizes, option order, selected/disabled states, and submit/cancel hierarchy.
- For selects, comboboxes, radios, checkboxes, switches, and upload controls, keep source trigger/control geometry and do not normalize intentionally different controls into generic pills or cards.
- Source content inventory (from the source markup):
- Card wrapper `
` opens with `
` `Preferences` and the sub-line `Customize your Preline workspace personal preferences.`.
- Six stacked rows in this order, each `py-6 sm:py-8` and separated by `border-t border-line-2 first:border-t-0`, using a `grid sm:grid-cols-12` split (label column `sm:col-span-4 2xl:col-span-2`, control column `sm:col-span-8 xl:col-span-6 2xl:col-span-5`): `Language`, `Time zone`, `Date Format`, `Week start`, `Weekend`, `Appearance`.
- Selected-on-load values: Language `English (UK)` (13 language options after a `Choose` placeholder, helper text `Change the language used in the user interface.`), Time zone `Europe/London (GMT)` (other option `Asia/Singapore (GMT)`), Week start `Monday` (helper text `This will change how all calendars in your app look.`), Weekend `Sunday`.
- The Time zone row also carries a switch labelled `Automatic time zone` (`id="hs-pro-daptzts"`, `peer sr-only` checkbox in an `w-11 h-6` track) that is unchecked on first load.
- Date Format is 2 inline radio cards sharing `name="hs-pro-dapdfch-name"`, in order `MM/DD/YYYY` (checked on load) and `DD/MM/YYYY`, each a `w-37.5` `py-2 px-3` bordered `rounded-lg` label.
- Appearance shows the paragraph `Choose how Preline looks to you. Select a single theme, or sync with your system and automatically switch between day and night themes.`, the bold sub-heading `Theme mode`, the line `Preline theme will match your system active settings`, then a `grid grid-cols-3 gap-x-2 sm:gap-x-4` of 3 image radio cards sharing `name="hs-pro-dapta"` titled `System` (checked on load), `Light`, `Dark`, using the exact images `https://preline.co/assets/svg/pro/account-system-image.svg`, `account-light-image.svg`, and `account-dark-image.svg`.
- Footer is a `flex gap-x-3` button pair: primary `Save changes` then secondary `Cancel`, both `type="button"`.
- All four selects are Preline `data-hs-select` (HSSelect) instances over a `class="hidden"` native `` with a `Choose` first option, a custom toggle button, checkmark `optionTemplate`, and a chevron `extraMarkup`; the Language/Week start/Weekend dropdowns use `w-40` and the Time zone dropdown `min-w-57.5`.
Token and Tailwind rules:
- Treat source token classes as semantic roles, not fixed class names to blindly copy.
- Map every source `primary` role to the destination project's current primary token/config/CSS variable. Active links, checked states, progress lines, focus rings, primary gradients, logo primary fills/strokes, and primary buttons must share that destination primary color.
- Do not hardcode Preline blue or emit `text-blue-*`, `bg-blue-*`, `border-blue-*`, `fill-blue-*`, `stroke-blue-*`, `from-blue-*`, `via-blue-*`, `to-blue-*`, or fixed blue hex/rgb values for primary roles unless the destination primary is explicitly blue.
- Before using source-only token classes such as `text-foreground-inverse`, `bg-layer`, `border-layer-line`, `bg-navbar`, `border-line-2`, `bg-dropdown`, or similar Preline tokens, inspect the destination Tailwind config, global CSS/theme variables, and existing components for an equivalent utility/token.
- Prefer existing destination utilities such as `text-white`, `text-primary-foreground`, `text-foreground`, `text-muted-foreground`, `bg-background`, `bg-card`, `bg-popover`, `border-border`, `bg-muted`, `bg-accent`, `ring-ring`, or app-specific tokens when they match the source role.
- If no equivalent exists, add the smallest project-appropriate token or utility before using it. Do not leave undefined source classes in the generated markup.
Asset and icon rules:
- Use exact source images, avatars, product media, branded SVGs, payment marks, channel logos, and app icons when the source provides them.
- Do not replace source assets with initials, emojis, generic icons, generated placeholders, or different stock media.
- Ordinary interface icons should match the destination icon system. If the project uses Lucide-style outline icons, keep the 24 viewBox, `fill="none"`, `stroke="currentColor"`, rounded caps/joins, and source stroke widths.
- Brand/source SVG shape is fixed content. Only map semantic colors such as primary fill/stroke to the destination token.
Behavior and accessibility:
- Preserve source interactions: links, buttons, dropdowns, tooltips, tabs, menus, drawers, modals, toggles, search, filters, form controls, validation states, loading/empty states, and open/closed defaults.
- For source behavior powered by Preline JS or a third-party package, inspect installed dependencies and existing primitives first. Reuse a destination primitive only when it can preserve the source geometry, states, accessibility, and behavior.
- Treat new dependencies as allowed by default unless the user, repository instructions, or package policy explicitly prohibit them. When no faithful equivalent exists, install/use the Preline UI runtime/plugin or the exact source third-party package; do not silently substitute ad hoc JavaScript or custom React state.
- Only under an explicit dependency prohibition may you implement a scoped framework-native equivalent. It must preserve keyboard and focus management, placement and layering, responsive behavior, and accessibility; static or simplified approximations are not acceptable.
- Use semantic HTML and accessible names. Keep `aria-current`, `aria-expanded`, `aria-haspopup`, `role`, labels, focus states, and keyboard behavior when the source exposes them or the destination primitive requires them.
- Desktop and mobile states must not overlap text, clip controls, or shift layout unexpectedly. Controls with icons, counters, badges, and labels should keep stable dimensions across hover/focus/active states.
Final QA:
- Compare the result against the source preview and HTML tab.
- Verify primary color follows the destination project, not Preline's default blue.
- Verify all emitted classes exist in the destination or are added deliberately.
- Verify responsive layout, focus states, dropdown/popover layering, long-text truncation, and source asset paths.
- Keep the final implementation scoped to this block and avoid unrelated refactors.
Create a responsive UI block named "Notification Preferences Table" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.
Implementation preflight:
- Exact public block reference: https://preline.co/blocks/forms/pages-and-settings/#notification-preferences-table. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.
Build only this source block. Do not add unrelated page chrome, marketing sections, dashboard widgets, extra cards, extra modals, placeholder states, or footer content unless they are present in the source block.
Source metadata:
- Catalog family: forms/pages-and-settings
- Block ID: notification-preferences-table
- Source description: Settings table organizes notification types across multiple opt-in columns with checkbox rows.
- Preview iframe: https://preline.co/blocks/forms/pages-and-settings/iframes/pro/notification-preferences-table.html (repo path: blocks/forms/pages-and-settings/iframes/pro/notification-preferences-table.html)
- Source markup reference:
- partials/pro/admin-dashboard/layouts-components/user-profile-table-format-list-of-checkboxes.html
Use the source HTML tab and referenced partials as the source of truth. Preserve exact visible copy, content order, hierarchy, component density, spacing relationships, borders, radii, icons, status markers, dropdown/menu rows, form states, responsive order, and interaction content. If the source imports shared partials or assets, reuse those local components/assets when the destination can import them; otherwise recreate their visible structure faithfully from the source.
Block-specific fidelity rules:
- Preserve labels, helper text, validation/error states, required markers, input grouping, focus behavior, control sizes, option order, selected/disabled states, and submit/cancel hierarchy.
- For selects, comboboxes, radios, checkboxes, switches, and upload controls, keep source trigger/control geometry and do not normalize intentionally different controls into generic pills or cards.
- Source content inventory (from the source markup):
- Root is `
`; the desktop-only header row (`hidden md:block`) is a `grid md:grid-cols-5 lg:gap-x-3 md:gap-x-6 p-3 md:p-5` with `Notify me about` spanning 2 columns and 3 centered icon columns titled `Email`, `Desktop` and `Mobile`, the last two each captioned `Push notification`.
- Three group header bars, in order `General`, `API`, `Tasks`, each a `bg-surface rounded-lg p-3 md:p-5` grid row whose 3 channel columns hold a `Toggle all` text button (9 `Toggle all` buttons total, `hidden md:block`).
- Six preference rows in order with these exact title/description pairs: `Mentions` / `Receive a notification if a teammate mentions you in a note.`, `Service provider updates` / `Receive a notification when there are changes to the list of Preline service providers`, `Webhooks` / `Receive a notification when webhooks are consistently failing.`, `Task Assignments` / `Notify me when I'm assigned a task`, `Tasks completed` / `Only for tasks youʼve created or assigned`, `Tasks uncompleted` / `Only for tasks youʼve created or assigned` (the last two use a curly `ʼ`).
- Checked-on-load state: `Mentions`, `Service provider updates` and `Webhooks` have only the Email checkbox `checked`; `Task Assignments`, `Tasks completed` and `Tasks uncompleted` have all three checkboxes `checked`.
- Each preference row is `
` with the label cell at `md:col-span-2`; on mobile every checkbox cell becomes a `grid grid-cols-2` line with an `md:hidden` text label reading `Email`, `Desktop` or `Mobile` and the box aligned `text-end`.
- Controls are plain `size-4` `rounded-sm` native checkboxes; there is no table element, no switch, and no save/cancel footer.
- Fully static: no Preline JS plugins and no `data-hs-*` attributes - the `Toggle all` buttons carry no wiring in the source.
Token and Tailwind rules:
- Treat source token classes as semantic roles, not fixed class names to blindly copy.
- Map every source `primary` role to the destination project's current primary token/config/CSS variable. Active links, checked states, progress lines, focus rings, primary gradients, logo primary fills/strokes, and primary buttons must share that destination primary color.
- Do not hardcode Preline blue or emit `text-blue-*`, `bg-blue-*`, `border-blue-*`, `fill-blue-*`, `stroke-blue-*`, `from-blue-*`, `via-blue-*`, `to-blue-*`, or fixed blue hex/rgb values for primary roles unless the destination primary is explicitly blue.
- Before using source-only token classes such as `text-foreground-inverse`, `bg-layer`, `border-layer-line`, `bg-navbar`, `border-line-2`, `bg-dropdown`, or similar Preline tokens, inspect the destination Tailwind config, global CSS/theme variables, and existing components for an equivalent utility/token.
- Prefer existing destination utilities such as `text-white`, `text-primary-foreground`, `text-foreground`, `text-muted-foreground`, `bg-background`, `bg-card`, `bg-popover`, `border-border`, `bg-muted`, `bg-accent`, `ring-ring`, or app-specific tokens when they match the source role.
- If no equivalent exists, add the smallest project-appropriate token or utility before using it. Do not leave undefined source classes in the generated markup.
Asset and icon rules:
- Use exact source images, avatars, product media, branded SVGs, payment marks, channel logos, and app icons when the source provides them.
- Do not replace source assets with initials, emojis, generic icons, generated placeholders, or different stock media.
- Ordinary interface icons should match the destination icon system. If the project uses Lucide-style outline icons, keep the 24 viewBox, `fill="none"`, `stroke="currentColor"`, rounded caps/joins, and source stroke widths.
- Brand/source SVG shape is fixed content. Only map semantic colors such as primary fill/stroke to the destination token.
Behavior and accessibility:
- Preserve source interactions: links, buttons, dropdowns, tooltips, tabs, menus, drawers, modals, toggles, search, filters, form controls, validation states, loading/empty states, and open/closed defaults.
- For source behavior powered by Preline JS or a third-party package, inspect installed dependencies and existing primitives first. Reuse a destination primitive only when it can preserve the source geometry, states, accessibility, and behavior.
- Treat new dependencies as allowed by default unless the user, repository instructions, or package policy explicitly prohibit them. When no faithful equivalent exists, install/use the Preline UI runtime/plugin or the exact source third-party package; do not silently substitute ad hoc JavaScript or custom React state.
- Only under an explicit dependency prohibition may you implement a scoped framework-native equivalent. It must preserve keyboard and focus management, placement and layering, responsive behavior, and accessibility; static or simplified approximations are not acceptable.
- Use semantic HTML and accessible names. Keep `aria-current`, `aria-expanded`, `aria-haspopup`, `role`, labels, focus states, and keyboard behavior when the source exposes them or the destination primitive requires them.
- Desktop and mobile states must not overlap text, clip controls, or shift layout unexpectedly. Controls with icons, counters, badges, and labels should keep stable dimensions across hover/focus/active states.
Final QA:
- Compare the result against the source preview and HTML tab.
- Verify primary color follows the destination project, not Preline's default blue.
- Verify all emitted classes exist in the destination or are added deliberately.
- Verify responsive layout, focus states, dropdown/popover layering, long-text truncation, and source asset paths.
- Keep the final implementation scoped to this block and avoid unrelated refactors.
Notify me about
Email
Desktop
Push notification
Mobile
Push notification
General
Toggle all
Toggle all
Toggle all
Mentions
Receive a notification if a teammate mentions you in a note.
Email
Desktop
Mobile
Service provider updates
Receive a notification when there are changes to the list of Preline service providers
Email
Desktop
Mobile
API
Toggle all
Toggle all
Toggle all
Webhooks
Receive a notification when webhooks are consistently failing.
Create a responsive UI block named "Workspace Settings Form" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.
Implementation preflight:
- Exact public block reference: https://preline.co/blocks/forms/pages-and-settings/#workspace-settings-form. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.
Build only this source block. Do not add unrelated page chrome, marketing sections, dashboard widgets, extra cards, extra modals, placeholder states, or footer content unless they are present in the source block.
Source metadata:
- Catalog family: forms/pages-and-settings
- Block ID: workspace-settings-form
- Source description: Workspace settings page combines branding controls, workspace fields, member roles, and destructive actions.
- Preview iframe: https://preline.co/blocks/forms/pages-and-settings/iframes/pro/workspace-settings-form.html (repo path: blocks/forms/pages-and-settings/iframes/pro/workspace-settings-form.html)
- Source markup reference:
- partials/pro/admin-dashboard/cards/account-workspace.html
- partials/pro/admin-dashboard/sources/avatar-upload-form.html
- partials/pro/admin-dashboard/layouts-components/card-list-with-branding-logos-and-buttons.html
- partials/pro/admin-dashboard/layouts-components/export-options-table.html
Use the source HTML tab and referenced partials as the source of truth. Preserve exact visible copy, content order, hierarchy, component density, spacing relationships, borders, radii, icons, status markers, dropdown/menu rows, form states, responsive order, and interaction content. If the source imports shared partials or assets, reuse those local components/assets when the destination can import them; otherwise recreate their visible structure faithfully from the source.
Block-specific fidelity rules:
- Preserve labels, helper text, validation/error states, required markers, input grouping, focus behavior, control sizes, option order, selected/disabled states, and submit/cancel hierarchy.
- For selects, comboboxes, radios, checkboxes, switches, and upload controls, keep source trigger/control geometry and do not normalize intentionally different controls into generic pills or cards.
- Source content inventory (from the source markup):
- Card wrapper `
` headed by `
` `Workspace` over `Change the settings for your current workspace here.`.
- Six stacked `py-6 sm:py-8` rows split by `border-t border-line-2 first:border-t-0`, each a `grid sm:grid-cols-12` (label `sm:col-span-4 xl:col-span-3 2xl:col-span-2`, control `sm:col-span-8 xl:col-span-6 2xl:col-span-4`), labelled in order: `Workspace name`, `Workspace logo`, `Workspace URL`, `Organizations`, `Export Workspace data`, `Danger zone`.
- Text inputs are empty with placeholders `Workspace name` and `name.site.app`; the logo row shows the empty image placeholder (no photo) with an `Upload photo` primary button and a `Delete` destructive button rendered `disabled`, and no helper message.
- `Organizations` is a `flex flex-col bg-layer border border-layer-line rounded-xl -space-y-px` list of exactly 3 items, each a 32px brand SVG plus a sentence and a destructive `Leave` button carrying `data-hs-overlay="#hs-pro-chhdl"`: `Guideline` `outside collaborator on 1 projects`, `prosperops` `member and collaborator on 1 projects`, `Notion` `member and collaborator on 3 projects` (the leading word in each sentence is a primary link).
- `Export Workspace data` shows an outline `Get started` button with a download icon above a 2-row list whose desktop header columns read `Type` and `Date` (uppercase, `hidden md:grid md:grid-cols-12`): row 1 `CSV Export` / `Mar 12, 2023` / primary status `Progress 31%` / download button rendered `disabled`; row 2 `CSV Export` / `Jan 12, 2023` / `Completed` with a teal check icon / enabled download button. On mobile each cell prefixes an `md:hidden` label `Type:`, `Date:`, `Status:`, `Download:`.
- `Danger zone` is a destructive `Delete this workspace` button above the paragraph `This will immediately delete all of your data. This action is not reversible, so please continue with caution.` ending in a `Learn more` link.
- There is no save/cancel footer; the only JS wiring is the three `data-hs-overlay="#hs-pro-chhdl"` triggers, and that modal is NOT part of this block - keep the triggers and do not invent the overlay.
Token and Tailwind rules:
- Treat source token classes as semantic roles, not fixed class names to blindly copy.
- Map every source `primary` role to the destination project's current primary token/config/CSS variable. Active links, checked states, progress lines, focus rings, primary gradients, logo primary fills/strokes, and primary buttons must share that destination primary color.
- Do not hardcode Preline blue or emit `text-blue-*`, `bg-blue-*`, `border-blue-*`, `fill-blue-*`, `stroke-blue-*`, `from-blue-*`, `via-blue-*`, `to-blue-*`, or fixed blue hex/rgb values for primary roles unless the destination primary is explicitly blue.
- Before using source-only token classes such as `text-foreground-inverse`, `bg-layer`, `border-layer-line`, `bg-navbar`, `border-line-2`, `bg-dropdown`, or similar Preline tokens, inspect the destination Tailwind config, global CSS/theme variables, and existing components for an equivalent utility/token.
- Prefer existing destination utilities such as `text-white`, `text-primary-foreground`, `text-foreground`, `text-muted-foreground`, `bg-background`, `bg-card`, `bg-popover`, `border-border`, `bg-muted`, `bg-accent`, `ring-ring`, or app-specific tokens when they match the source role.
- If no equivalent exists, add the smallest project-appropriate token or utility before using it. Do not leave undefined source classes in the generated markup.
Asset and icon rules:
- Use exact source images, avatars, product media, branded SVGs, payment marks, channel logos, and app icons when the source provides them.
- Do not replace source assets with initials, emojis, generic icons, generated placeholders, or different stock media.
- Ordinary interface icons should match the destination icon system. If the project uses Lucide-style outline icons, keep the 24 viewBox, `fill="none"`, `stroke="currentColor"`, rounded caps/joins, and source stroke widths.
- Brand/source SVG shape is fixed content. Only map semantic colors such as primary fill/stroke to the destination token.
Behavior and accessibility:
- Preserve source interactions: links, buttons, dropdowns, tooltips, tabs, menus, drawers, modals, toggles, search, filters, form controls, validation states, loading/empty states, and open/closed defaults.
- For source behavior powered by Preline JS or a third-party package, inspect installed dependencies and existing primitives first. Reuse a destination primitive only when it can preserve the source geometry, states, accessibility, and behavior.
- Treat new dependencies as allowed by default unless the user, repository instructions, or package policy explicitly prohibit them. When no faithful equivalent exists, install/use the Preline UI runtime/plugin or the exact source third-party package; do not silently substitute ad hoc JavaScript or custom React state.
- Only under an explicit dependency prohibition may you implement a scoped framework-native equivalent. It must preserve keyboard and focus management, placement and layering, responsive behavior, and accessibility; static or simplified approximations are not acceptable.
- Use semantic HTML and accessible names. Keep `aria-current`, `aria-expanded`, `aria-haspopup`, `role`, labels, focus states, and keyboard behavior when the source exposes them or the destination primitive requires them.
- Desktop and mobile states must not overlap text, clip controls, or shift layout unexpectedly. Controls with icons, counters, badges, and labels should keep stable dimensions across hover/focus/active states.
Final QA:
- Compare the result against the source preview and HTML tab.
- Verify primary color follows the destination project, not Preline's default blue.
- Verify all emitted classes exist in the destination or are added deliberately.
- Verify responsive layout, focus states, dropdown/popover layering, long-text truncation, and source asset paths.
- Keep the final implementation scoped to this block and avoid unrelated refactors.
Workspace
Change the settings for your current workspace here.
Standalone settings page stacks profile fields, contact details, and password actions in bordered sections.
Preview
HTML
AI Prompt
Copy Prompt
Copy Code
Loading...
Create a responsive UI block named "Account Settings Page" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.
Implementation preflight:
- Exact public block reference: https://preline.co/blocks/forms/pages-and-settings/#account-settings-page. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.
Build only this source block. Do not add unrelated page chrome, marketing sections, dashboard widgets, extra cards, extra modals, placeholder states, or footer content unless they are present in the source block.
Source metadata:
- Catalog family: forms/pages-and-settings
- Block ID: account-settings-page
- Source description: Standalone settings page stacks profile fields, contact details, and password actions in bordered sections.
- Preview iframe: https://preline.co/blocks/forms/pages-and-settings/iframes/free/account-settings-page.html (repo path: blocks/forms/pages-and-settings/iframes/free/account-settings-page.html)
- Source markup reference:
- partials/blocks/sources/pages/af-account.html
Use the source HTML tab and referenced partials as the source of truth. Preserve exact visible copy, content order, hierarchy, component density, spacing relationships, borders, radii, icons, status markers, dropdown/menu rows, form states, responsive order, and interaction content. If the source imports shared partials or assets, reuse those local components/assets when the destination can import them; otherwise recreate their visible structure faithfully from the source.
Block-specific fidelity rules:
- Preserve labels, helper text, validation/error states, required markers, input grouping, focus behavior, control sizes, option order, selected/disabled states, and submit/cancel hierarchy.
- For selects, comboboxes, radios, checkboxes, switches, and upload controls, keep source trigger/control geometry and do not normalize intentionally different controls into generic pills or cards.
- Source content inventory (from the source markup):
- Outer section is `
` around a `bg-layer rounded-xl shadow-xs p-4 sm:p-7` card headed by `
` `Profile` and the sub-line `Manage your name, password and account settings.`.
- The form is one `grid sm:grid-cols-12 gap-2 sm:gap-6` with each label in `sm:col-span-3` and each control in `sm:col-span-9`; rows in order: `Profile photo`, `Full name`, `Email`, `Password`, `Phone` `(Optional)`, `Gender`, `BIO`.
- Profile photo shows the real avatar `https://preline.co/assets/img/160x160/img1.jpg` at `size-16 rounded-full ring-2 ring-layer` next to a single outline button `Upload photo` with an upload arrow icon.
- Placeholders exactly: `Maria` and `Boone` (two joined first/last-name inputs), `maria@site.com`, `Enter current password` and `Enter new password` (two stacked password fields), `+x(xxx)xxx-xx-xx`, and textarea `Type your message...` with `rows="6"`.
- The `Full name` label carries a Preline tooltip (`hs-tooltip` with `[--placement:auto]`) on an info circle icon reading `Displayed on public forums, such as Preline`.
- Phone row appends a native `` with options `Mobile` (selected), `Home`, `Work`, `Fax`, joined seamlessly to the input, and below it a primary text link `Add phone` with a plus-circle icon.
- Gender is 3 joined radio cards sharing `name="af-account-gender-checkbox"` in order `Male` (checked on load), `Female`, `Other`.
- Footer is `mt-5 flex justify-end gap-x-2` with `Cancel` first and primary `Save changes` second; apart from the tooltip there is no Preline JS plugin in this block.
Token and Tailwind rules:
- Treat source token classes as semantic roles, not fixed class names to blindly copy.
- Map every source `primary` role to the destination project's current primary token/config/CSS variable. Active links, checked states, progress lines, focus rings, primary gradients, logo primary fills/strokes, and primary buttons must share that destination primary color.
- Do not hardcode Preline blue or emit `text-blue-*`, `bg-blue-*`, `border-blue-*`, `fill-blue-*`, `stroke-blue-*`, `from-blue-*`, `via-blue-*`, `to-blue-*`, or fixed blue hex/rgb values for primary roles unless the destination primary is explicitly blue.
- Before using source-only token classes such as `text-foreground-inverse`, `bg-layer`, `border-layer-line`, `bg-navbar`, `border-line-2`, `bg-dropdown`, or similar Preline tokens, inspect the destination Tailwind config, global CSS/theme variables, and existing components for an equivalent utility/token.
- Prefer existing destination utilities such as `text-white`, `text-primary-foreground`, `text-foreground`, `text-muted-foreground`, `bg-background`, `bg-card`, `bg-popover`, `border-border`, `bg-muted`, `bg-accent`, `ring-ring`, or app-specific tokens when they match the source role.
- If no equivalent exists, add the smallest project-appropriate token or utility before using it. Do not leave undefined source classes in the generated markup.
Asset and icon rules:
- Use exact source images, avatars, product media, branded SVGs, payment marks, channel logos, and app icons when the source provides them.
- Do not replace source assets with initials, emojis, generic icons, generated placeholders, or different stock media.
- Ordinary interface icons should match the destination icon system. If the project uses Lucide-style outline icons, keep the 24 viewBox, `fill="none"`, `stroke="currentColor"`, rounded caps/joins, and source stroke widths.
- Brand/source SVG shape is fixed content. Only map semantic colors such as primary fill/stroke to the destination token.
Behavior and accessibility:
- Preserve source interactions: links, buttons, dropdowns, tooltips, tabs, menus, drawers, modals, toggles, search, filters, form controls, validation states, loading/empty states, and open/closed defaults.
- For source behavior powered by Preline JS or a third-party package, inspect installed dependencies and existing primitives first. Reuse a destination primitive only when it can preserve the source geometry, states, accessibility, and behavior.
- Treat new dependencies as allowed by default unless the user, repository instructions, or package policy explicitly prohibit them. When no faithful equivalent exists, install/use the Preline UI runtime/plugin or the exact source third-party package; do not silently substitute ad hoc JavaScript or custom React state.
- Only under an explicit dependency prohibition may you implement a scoped framework-native equivalent. It must preserve keyboard and focus management, placement and layering, responsive behavior, and accessibility; static or simplified approximations are not acceptable.
- Use semantic HTML and accessible names. Keep `aria-current`, `aria-expanded`, `aria-haspopup`, `role`, labels, focus states, and keyboard behavior when the source exposes them or the destination primitive requires them.
- Desktop and mobile states must not overlap text, clip controls, or shift layout unexpectedly. Controls with icons, counters, badges, and labels should keep stable dimensions across hover/focus/active states.
Final QA:
- Compare the result against the source preview and HTML tab.
- Verify primary color follows the destination project, not Preline's default blue.
- Verify all emitted classes exist in the destination or are added deliberately.
- Verify responsive layout, focus states, dropdown/popover layering, long-text truncation, and source asset paths.
- Keep the final implementation scoped to this block and avoid unrelated refactors.
Submission page combines app metadata fields, upload areas, and review settings in a single long form.
Preview
HTML
AI Prompt
Copy Prompt
Copy Code
Loading...
Create a responsive UI block named "App Submission Form" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.
Implementation preflight:
- Exact public block reference: https://preline.co/blocks/forms/pages-and-settings/#app-submission-form. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.
Build only this source block. Do not add unrelated page chrome, marketing sections, dashboard widgets, extra cards, extra modals, placeholder states, or footer content unless they are present in the source block.
Source metadata:
- Catalog family: forms/pages-and-settings
- Block ID: app-submission-form
- Source description: Submission page combines app metadata fields, upload areas, and review settings in a single long form.
- Preview iframe: https://preline.co/blocks/forms/pages-and-settings/iframes/free/app-submission-form.html (repo path: blocks/forms/pages-and-settings/iframes/free/app-submission-form.html)
- Source markup reference:
- partials/blocks/sources/pages/af-submit-app.html
Use the source HTML tab and referenced partials as the source of truth. Preserve exact visible copy, content order, hierarchy, component density, spacing relationships, borders, radii, icons, status markers, dropdown/menu rows, form states, responsive order, and interaction content. If the source imports shared partials or assets, reuse those local components/assets when the destination can import them; otherwise recreate their visible structure faithfully from the source.
Block-specific fidelity rules:
- Preserve labels, helper text, validation/error states, required markers, input grouping, focus behavior, control sizes, option order, selected/disabled states, and submit/cancel hierarchy.
- For selects, comboboxes, radios, checkboxes, switches, and upload controls, keep source trigger/control geometry and do not normalize intentionally different controls into generic pills or cards.
- Source content inventory (from the source markup):
- Section wrapper `
Checkout-style page collects card details, billing fields, and order summary information in one layout.
Preview
HTML
AI Prompt
Copy Prompt
Copy Code
Loading...
Create a responsive UI block named "Payment Details Form" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.
Implementation preflight:
- Exact public block reference: https://preline.co/blocks/forms/pages-and-settings/#payment-details-form. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.
Build only this source block. Do not add unrelated page chrome, marketing sections, dashboard widgets, extra cards, extra modals, placeholder states, or footer content unless they are present in the source block.
Source metadata:
- Catalog family: forms/pages-and-settings
- Block ID: payment-details-form
- Source description: Checkout-style page collects card details, billing fields, and order summary information in one layout.
- Preview iframe: https://preline.co/blocks/forms/pages-and-settings/iframes/free/payment-details-form.html (repo path: blocks/forms/pages-and-settings/iframes/free/payment-details-form.html)
- Source markup reference:
- partials/blocks/sources/pages/af-payment.html
Use the source HTML tab and referenced partials as the source of truth. Preserve exact visible copy, content order, hierarchy, component density, spacing relationships, borders, radii, icons, status markers, dropdown/menu rows, form states, responsive order, and interaction content. If the source imports shared partials or assets, reuse those local components/assets when the destination can import them; otherwise recreate their visible structure faithfully from the source.
Block-specific fidelity rules:
- Preserve labels, helper text, validation/error states, required markers, input grouping, focus behavior, control sizes, option order, selected/disabled states, and submit/cancel hierarchy.
- For selects, comboboxes, radios, checkboxes, switches, and upload controls, keep source trigger/control geometry and do not normalize intentionally different controls into generic pills or cards.
- Source content inventory (from the source markup):
- Section wrapper `
` around a `bg-layer rounded-xl shadow-xs p-4 sm:p-7` card whose centered header is `
` `Payment` over `Manage your payment methods.`.
- Three sections divided by `py-6 first:pt-0 last:pb-0 border-t first:border-transparent border-layer-line`, labelled in order `Billing contact`, `Billing address`, `Payment method`; each section is a `mt-2 space-y-3` stack of full-width `rounded-lg` inputs.
- Billing contact = 3 inputs with placeholders `First Name`, `Last Name`, `Phone Number`.
- Billing address = `Street Address`, `Apt, Syuite, Building (Optional)` (keep this exact source spelling), then a `flex flex-col sm:flex-row gap-3` row with the `Zip Code` input and two native selects whose selected first options read `City` (then `City 1`, `City 2`, `City 3`) and `State` (then `State 1`, `State 2`, `State 3`).
- Payment method = `Name on Card`, `Card Number`, then a `flex flex-col sm:flex-row gap-3` pair of `Expiration Date` and `CVV Code`.
- Every field is an empty placeholder-only input - no values, no helper text, no required markers, and no card-brand icons anywhere in the block.
- Footer sits outside the `
`: `mt-5 flex justify-end gap-x-2` with outline `Cancel` first and primary `Save changes` second.
- Fully static: no Preline JS plugins, no `data-hs-*` attributes, no validation states.
Token and Tailwind rules:
- Treat source token classes as semantic roles, not fixed class names to blindly copy.
- Map every source `primary` role to the destination project's current primary token/config/CSS variable. Active links, checked states, progress lines, focus rings, primary gradients, logo primary fills/strokes, and primary buttons must share that destination primary color.
- Do not hardcode Preline blue or emit `text-blue-*`, `bg-blue-*`, `border-blue-*`, `fill-blue-*`, `stroke-blue-*`, `from-blue-*`, `via-blue-*`, `to-blue-*`, or fixed blue hex/rgb values for primary roles unless the destination primary is explicitly blue.
- Before using source-only token classes such as `text-foreground-inverse`, `bg-layer`, `border-layer-line`, `bg-navbar`, `border-line-2`, `bg-dropdown`, or similar Preline tokens, inspect the destination Tailwind config, global CSS/theme variables, and existing components for an equivalent utility/token.
- Prefer existing destination utilities such as `text-white`, `text-primary-foreground`, `text-foreground`, `text-muted-foreground`, `bg-background`, `bg-card`, `bg-popover`, `border-border`, `bg-muted`, `bg-accent`, `ring-ring`, or app-specific tokens when they match the source role.
- If no equivalent exists, add the smallest project-appropriate token or utility before using it. Do not leave undefined source classes in the generated markup.
Asset and icon rules:
- Use exact source images, avatars, product media, branded SVGs, payment marks, channel logos, and app icons when the source provides them.
- Do not replace source assets with initials, emojis, generic icons, generated placeholders, or different stock media.
- Ordinary interface icons should match the destination icon system. If the project uses Lucide-style outline icons, keep the 24 viewBox, `fill="none"`, `stroke="currentColor"`, rounded caps/joins, and source stroke widths.
- Brand/source SVG shape is fixed content. Only map semantic colors such as primary fill/stroke to the destination token.
Behavior and accessibility:
- Preserve source interactions: links, buttons, dropdowns, tooltips, tabs, menus, drawers, modals, toggles, search, filters, form controls, validation states, loading/empty states, and open/closed defaults.
- For source behavior powered by Preline JS or a third-party package, inspect installed dependencies and existing primitives first. Reuse a destination primitive only when it can preserve the source geometry, states, accessibility, and behavior.
- Treat new dependencies as allowed by default unless the user, repository instructions, or package policy explicitly prohibit them. When no faithful equivalent exists, install/use the Preline UI runtime/plugin or the exact source third-party package; do not silently substitute ad hoc JavaScript or custom React state.
- Only under an explicit dependency prohibition may you implement a scoped framework-native equivalent. It must preserve keyboard and focus management, placement and layering, responsive behavior, and accessibility; static or simplified approximations are not acceptable.
- Use semantic HTML and accessible names. Keep `aria-current`, `aria-expanded`, `aria-haspopup`, `role`, labels, focus states, and keyboard behavior when the source exposes them or the destination primitive requires them.
- Desktop and mobile states must not overlap text, clip controls, or shift layout unexpectedly. Controls with icons, counters, badges, and labels should keep stable dimensions across hover/focus/active states.
Final QA:
- Compare the result against the source preview and HTML tab.
- Verify primary color follows the destination project, not Preline's default blue.
- Verify all emitted classes exist in the destination or are added deliberately.
- Verify responsive layout, focus states, dropdown/popover layering, long-text truncation, and source asset paths.
- Keep the final implementation scoped to this block and avoid unrelated refactors.
Full-page application form combines role details, text fields, uploads, and consent checkboxes.
Preview
HTML
AI Prompt
Copy Prompt
Copy Code
Loading...
Create a responsive UI block named "Application Submission Form" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.
Implementation preflight:
- Exact public block reference: https://preline.co/blocks/forms/pages-and-settings/#application-submission-form. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.
Build only this source block. Do not add unrelated page chrome, marketing sections, dashboard widgets, extra cards, extra modals, placeholder states, or footer content unless they are present in the source block.
Source metadata:
- Catalog family: forms/pages-and-settings
- Block ID: application-submission-form
- Source description: Full-page application form combines role details, text fields, uploads, and consent checkboxes.
- Preview iframe: https://preline.co/blocks/forms/pages-and-settings/iframes/free/application-submission-form.html (repo path: blocks/forms/pages-and-settings/iframes/free/application-submission-form.html)
- Source markup reference:
- partials/blocks/sources/pages/af-submit-application.html
Use the source HTML tab and referenced partials as the source of truth. Preserve exact visible copy, content order, hierarchy, component density, spacing relationships, borders, radii, icons, status markers, dropdown/menu rows, form states, responsive order, and interaction content. If the source imports shared partials or assets, reuse those local components/assets when the destination can import them; otherwise recreate their visible structure faithfully from the source.
Block-specific fidelity rules:
- Preserve labels, helper text, validation/error states, required markers, input grouping, focus behavior, control sizes, option order, selected/disabled states, and submit/cancel hierarchy.
- For selects, comboboxes, radios, checkboxes, switches, and upload controls, keep source trigger/control geometry and do not normalize intentionally different controls into generic pills or cards.
- Source content inventory (from the source markup):
- Section wrapper `
` around a `bg-layer rounded-xl shadow-xs p-4 sm:p-7` card holding one `
`.
- Five sections separated by `py-8 first:pt-0 last:pb-0 border-t first:border-transparent border-layer-line`, each `
`, in order: `Submit your application`, `Profile`, `Links`, `Before sending your application, please let us know...`, `Submit application`.
- The first four sections use a `grid sm:grid-cols-12 gap-2 sm:gap-4` with labels in `sm:col-span-3` and controls in `sm:col-span-9`; field labels in order are `Full name` (two joined inputs for first/last), `Email`, `Phone`, `Current Company`, `Resume/CV`, `Personal summary`, `LinkedIn URL`, `Twitter URL`, `Github URL`, `Portfolio URL`, `Other website`, `Desired salary`, `Available start date`.
- Every text input ships with no placeholder and no value; the only placeholder in the block is on the `rows="6"` `Personal summary` textarea: `Add a cover letter or anything else you want to share.`.
- `Resume/CV` is a native `type="file"` input styled with `file:` utilities (`file:bg-surface file:border-0 file:me-4 file:py-2 file:px-4`) and a `sr-only` label `Choose file`.
- Two primary text links with plus-circle icons: `Add phone` under the Phone field and `Add URL` at the end of the Links section (offset to `sm:col-start-4 sm:col-span-8`).
- The final section reads `In order to contact you with future jobs that you may be interested in, we need to store your personal data.` then `If you are happy for us to do so please click the checkbox below.`, followed by an unchecked checkbox labelled `Allow us to process your personal information.`.
- The form ends with a single full-width (`w-full py-3 px-4`) primary button `Submit application`; the block is fully static with no Preline JS plugins, no `data-hs-*` attributes, and no error states.
Token and Tailwind rules:
- Treat source token classes as semantic roles, not fixed class names to blindly copy.
- Map every source `primary` role to the destination project's current primary token/config/CSS variable. Active links, checked states, progress lines, focus rings, primary gradients, logo primary fills/strokes, and primary buttons must share that destination primary color.
- Do not hardcode Preline blue or emit `text-blue-*`, `bg-blue-*`, `border-blue-*`, `fill-blue-*`, `stroke-blue-*`, `from-blue-*`, `via-blue-*`, `to-blue-*`, or fixed blue hex/rgb values for primary roles unless the destination primary is explicitly blue.
- Before using source-only token classes such as `text-foreground-inverse`, `bg-layer`, `border-layer-line`, `bg-navbar`, `border-line-2`, `bg-dropdown`, or similar Preline tokens, inspect the destination Tailwind config, global CSS/theme variables, and existing components for an equivalent utility/token.
- Prefer existing destination utilities such as `text-white`, `text-primary-foreground`, `text-foreground`, `text-muted-foreground`, `bg-background`, `bg-card`, `bg-popover`, `border-border`, `bg-muted`, `bg-accent`, `ring-ring`, or app-specific tokens when they match the source role.
- If no equivalent exists, add the smallest project-appropriate token or utility before using it. Do not leave undefined source classes in the generated markup.
Asset and icon rules:
- Use exact source images, avatars, product media, branded SVGs, payment marks, channel logos, and app icons when the source provides them.
- Do not replace source assets with initials, emojis, generic icons, generated placeholders, or different stock media.
- Ordinary interface icons should match the destination icon system. If the project uses Lucide-style outline icons, keep the 24 viewBox, `fill="none"`, `stroke="currentColor"`, rounded caps/joins, and source stroke widths.
- Brand/source SVG shape is fixed content. Only map semantic colors such as primary fill/stroke to the destination token.
Behavior and accessibility:
- Preserve source interactions: links, buttons, dropdowns, tooltips, tabs, menus, drawers, modals, toggles, search, filters, form controls, validation states, loading/empty states, and open/closed defaults.
- For source behavior powered by Preline JS or a third-party package, inspect installed dependencies and existing primitives first. Reuse a destination primitive only when it can preserve the source geometry, states, accessibility, and behavior.
- Treat new dependencies as allowed by default unless the user, repository instructions, or package policy explicitly prohibit them. When no faithful equivalent exists, install/use the Preline UI runtime/plugin or the exact source third-party package; do not silently substitute ad hoc JavaScript or custom React state.
- Only under an explicit dependency prohibition may you implement a scoped framework-native equivalent. It must preserve keyboard and focus management, placement and layering, responsive behavior, and accessibility; static or simplified approximations are not acceptable.
- Use semantic HTML and accessible names. Keep `aria-current`, `aria-expanded`, `aria-haspopup`, `role`, labels, focus states, and keyboard behavior when the source exposes them or the destination primitive requires them.
- Desktop and mobile states must not overlap text, clip controls, or shift layout unexpectedly. Controls with icons, counters, badges, and labels should keep stable dimensions across hover/focus/active states.
Final QA:
- Compare the result against the source preview and HTML tab.
- Verify primary color follows the destination project, not Preline's default blue.
- Verify all emitted classes exist in the destination or are added deliberately.
- Verify responsive layout, focus states, dropdown/popover layering, long-text truncation, and source asset paths.
- Keep the final implementation scoped to this block and avoid unrelated refactors.