Create a responsive UI block named "Report KPI Cards with Icons" 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/data-display/kpi-cards/#report-kpi-cards-with-icons. 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: data-display/kpi-cards
- Block ID: report-kpi-cards-with-icons
- Source description: Each metric card pairs an icon block with one value and a short delta line.
- Preview iframe: https://preline.co/blocks/data-display/kpi-cards/iframes/pro/report-kpi-cards-with-icons.html (repo path: blocks/data-display/kpi-cards/iframes/pro/report-kpi-cards-with-icons.html)
- Source markup reference:
- partials/pro/shared-inbox/cards/stats-card-with-icons-grid-view.html
- partials/pro/shared-inbox/sources/stats-card-with-icons.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 grid relationships, content width, card density, border/radius treatment, metric hierarchy, and status marker geometry.
- Do not align a local card to a broader page/header container unless the source does.
- Source content inventory (from the source markup):
- Four cards sit in `grid grid-cols-2 lg:grid-cols-4 gap-2 sm:gap-5`; each card is `p-5 flex flex-col bg-card border border-card-line shadow-xs rounded-xl`.
- Each header puts the value above the label: `1,086` / `Total emails`; `26` / `Assigned to me`; `873` / `Top sources`; `18m 44s` / `Avg. time to action`.
- Card 4's value is followed inline by a green rounded-full pill reading `9s` with an up-arrow icon; no other card has a badge.
- Two-column lists (`grid grid-cols-1 sm:grid-cols-2 gap-y-4 gap-x-2`, labels end with `:`): `Replied:` `828` / `Tagged:` `9`; `Resolved:` `32` / `Unresolved:` `20`; `Gmail:` `600` / `Mail:` `273`; `Replies:` `21m 49s` / `Opens:` `16m 30s`.
- Footer lines are `All mailboxes` on card 1 and `Last 30 Days` on cards 2, 3, and 4.
- Only card 1 carries the top-right avatar group of three overlapping brand marks (Apple Mail gradient, Google, Yandex) at `-space-x-3` with `ring-2 ring-card`; card 3's list uses full-color Gmail and Apple Mail brand SVGs while cards 1, 2, and 4 use `size-5` outline icons.
- Fully static; no charts, sparklines, dropdowns, or Preline JS plugins.
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 "Divided Summary KPI Card" 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/data-display/kpi-cards/#divided-summary-kpi-card. 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: data-display/kpi-cards
- Block ID: divided-summary-kpi-card
- Source description: Three small stats sit in one divided card, with each column reduced to a number and label.
- Preview iframe: https://preline.co/blocks/data-display/kpi-cards/iframes/pro/divided-summary-kpi-card.html (repo path: blocks/data-display/kpi-cards/iframes/pro/divided-summary-kpi-card.html)
- Source markup reference:
- partials/pro/helpdesk/cards/simple-stats-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 grid relationships, content width, card density, border/radius treatment, metric hierarchy, and status marker geometry.
- Do not align a local card to a broader page/header container unless the source does.
- Source content inventory (from the source markup):
- Wrapper is `grid grid-cols-1 sm:grid-cols-3 gap-2 md:gap-5 divide-y sm:divide-y-0 sm:divide-x divide-line-2`; exactly three columns, horizontal rules on mobile and vertical rules from `sm`.
- Column labels in order: `Support requests`, `Resolved requests`, `Tickets resolved by Al` - the third string uses `Al` in the source, copy it verbatim rather than correcting it.
- Values in order are `354`, `256`, `93` at `text-2xl font-medium`.
- Deltas in order are `47.9%` and `0.8%` in emerald with an up-arrow, and `2.5%` in red with a down-arrow.
- Each column closes with a muted comparison line: `198 last week`, `251 last week`, `97 last week`.
- Fully static; no links, buttons, charts, or Preline JS plugins.
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 "Gradient KPI Card" 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/data-display/kpi-cards/#gradient-kpi-card. 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: data-display/kpi-cards
- Block ID: gradient-kpi-card
- Source description: One large number, a short label, and a change marker sit inside a single tinted card.
- Preview iframe: https://preline.co/blocks/data-display/kpi-cards/iframes/pro/gradient-kpi-card.html (repo path: blocks/data-display/kpi-cards/iframes/pro/gradient-kpi-card.html)
- Source markup reference:
- partials/pro/admin-dashboard/cards/gradient-overlay-bg.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 grid relationships, content width, card density, border/radius treatment, metric hierarchy, and status marker geometry.
- Do not align a local card to a broader page/header container unless the source does.
- Source content inventory (from the source markup):
- Wrapper is `grid grid-cols-2 lg:grid-cols-4 gap-2 md:gap-3 xl:gap-5`; exactly four cards.
- Title/value pairs in order: `Total Users` / `356`, `Active users` / `239`, `Return user rate` / `79`, `Fake accounts` / `2`.
- Each card carries a blurred corner wash via a `before:` overlay (`before:bg-linear-to-br before:from-*-100 ... before:blur-xl`) in purple, teal, blue, red order, matched by a `size-8 md:size-10 bg-layer` icon chip whose glyph is tinted `text-purple-500`, `text-teal-500`, `text-blue-500`, `text-red-500`.
- Every card header has an HSDropdown three-dot menu (`hs-dropdown [--placement:bottom-right]`, trigger ids `hs-pro-dusd1` through `hs-pro-dusd4`, `aria-haspopup="menu"`, `aria-expanded="false"`) holding exactly two items, `Share stats` and `Hide stats`; all menus are closed on first load.
- Each card ends with three overlapping `size-7` avatars in `hs-tooltip` wrappers marked `hidden sm:inline-block hover:z-10`; tooltip names per card are Lewis Clarke / Lori Hunter / Ella Lauda, Lewis Clarke / Ella Lauda / Ols Schols, Lewis Clarke / Mark Colbert / Sara Andrews, and Chris Mathew / Lori Hunter / Finch Hoot.
- Avatars mix Unsplash photos with uppercase single-initial fallbacks (`L`, `O`, `M`, `S`, `C`, `L`, `F`) on `bg-surface-1 border-2 border-card`.
- Requires the Preline runtime for HSDropdown and HSTooltip; there is no chart 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.
Create a responsive UI block named "KPI Cards with Icons" 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/data-display/kpi-cards/#kpi-cards-with-icons. 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: data-display/kpi-cards
- Block ID: kpi-cards-with-icons
- Source description: A short grid of icon-led cards splits the summary into separate metric tiles.
- Preview iframe: https://preline.co/blocks/data-display/kpi-cards/iframes/pro/kpi-cards-with-icons.html (repo path: blocks/data-display/kpi-cards/iframes/pro/kpi-cards-with-icons.html)
- Source markup reference:
- partials/pro/ecommerce-admin/cards/stats-with-icons.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 grid relationships, content width, card density, border/radius treatment, metric hierarchy, and status marker geometry.
- Do not align a local card to a broader page/header container unless the source does.
- Source content inventory (from the source markup):
- Four cards sit in `grid grid-cols-2 lg:grid-cols-4 gap-2 md:gap-3 lg:gap-5`; each card is `p-4 sm:p-5 bg-card border border-card-line rounded-xl shadow-2xs`.
- Card order with label / value / sub-line: `In-store sales` `$7,820.75` `5k orders`; `Website sales` `$985,937.45` `21k orders`; `Discount` `$15,503.00` `6k orders`; `Affiliate` `$3,982.53` `2.4 orders`.
- Trend chips: green `4.3%` and `12.5%` with an up-trend polyline icon, red `4.4%` with a down-trend icon; the `Discount` card has no trend chip at all.
- Each 24-viewBox outline icon (truck, globe, tag-with-slash, stacked-squares) is `sm:order-2 mb-2 sm:mb-0 shrink-0 size-6 text-muted-foreground`, so it sits above the label on mobile and to the right of it from `sm` up.
- Labels are `text-sm text-muted-foreground-1`, values `text-lg md:text-xl font-semibold text-foreground`, sub-lines `text-sm leading-5 text-muted-foreground-1`.
- Fully static: no charts, sparklines, dropdowns, or Preline JS plugins 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.
Create a responsive UI block named "Role Stats Cards with Avatar Groups" 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/data-display/kpi-cards/#role-stats-cards-with-avatar-groups. 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: data-display/kpi-cards
- Block ID: role-stats-cards-with-avatar-groups
- Source description: Compact role cards combine totals, small labels, and avatar groups in a short row.
- Preview iframe: https://preline.co/blocks/data-display/kpi-cards/iframes/pro/role-stats-cards-with-avatar-groups.html (repo path: blocks/data-display/kpi-cards/iframes/pro/role-stats-cards-with-avatar-groups.html)
- Source markup reference:
- partials/pro/admin-dashboard/layouts-components/with-avatar-group.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 grid relationships, content width, card density, border/radius treatment, metric hierarchy, and status marker geometry.
- Do not align a local card to a broader page/header container unless the source does.
- Source content inventory (from the source markup):
- Four cards sit in `grid sm:grid-cols-2 lg:grid-cols-4 gap-2 xl:gap-4`; each card is `p-4 flex flex-col bg-card border border-card-line rounded-xl`.
- Counts and labels in order: `1` `Admin`, `5` `Members`, `2` `Limited access members`, `0` `Pending invites`; counts render at `text-4xl font-semibold text-foreground`.
- Avatar stacks are `-space-x-2` with `size-7` round entries: card 1 has one photo; card 2 has five entries ordered photo, initial `L`, photo, photo, initial `O`; card 3 has only the two initial chips `L` and `0`; card 4's avatar row is empty.
- Cards 2 and 3 append a Preline tooltip after the label (an `hs-tooltip [--placement:auto]` wrapper with a `size-3.5` filled info-circle toggle); cards 1 and 4 have no tooltip.
- Both tooltips carry the identical text `Limited Access Members can only access the projects, tasks, and messages explicitly shared with them.` and are invisible until hover/focus.
- Photo avatars are remote Unsplash URLs with `alt="Avatar"`; initial chips are `bg-layer border border-layer-line text-layer-foreground text-xs font-medium uppercase rounded-full`.
- No charts or sparklines; the only JS behavior is Preline's tooltip plugin.
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.
1
Admin
5
L
O
Members
Limited Access Members can only access the projects, tasks, and messages explicitly shared with them.
2
L
0
Limited access members
Limited Access Members can only access the projects, tasks, and messages explicitly shared with them.
The card is reduced to one value, one label, and one small comparison line.
Loading...
Create a responsive UI block named "Simple KPI Card" 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/data-display/kpi-cards/#simple-kpi-card. 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: data-display/kpi-cards
- Block ID: simple-kpi-card
- Source description: The card is reduced to one value, one label, and one small comparison line.
- Preview iframe: https://preline.co/blocks/data-display/kpi-cards/iframes/free/simple-kpi-card.html (repo path: blocks/data-display/kpi-cards/iframes/free/simple-kpi-card.html)
- Source markup reference:
- partials/blocks/sources/pages/as-simple-in-card.html
- partials/blocks/sources/cards/as-simple-in-card.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 grid relationships, content width, card density, border/radius treatment, metric hierarchy, and status marker geometry.
- Do not align a local card to a broader page/header container unless the source does.
- Source content inventory (from the source markup):
- A section wrapper `max-w-340 px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto` holds a `grid sm:grid-cols-2 lg:grid-cols-4 gap-4`; each card is `flex flex-col bg-card border border-card-line shadow-2xs rounded-xl` with an inner `p-4 md:p-5`.
- Four cards in order: `Total users` `72,540`, `Sessions` `29.4%`, `Avg. Click Rate` `56.8%`, `Pageviews` `92,913`.
- Labels are `text-xs uppercase text-muted-foreground-1`; values are `text-xl sm:text-2xl font-medium text-foreground`.
- Only card 1 shows a green `1.7%` up-trend and only card 3 a red `1.7%` down-trend; cards 2 and 4 carry no delta at all.
- Only card 1 has a `size-4` help-circle toggle with a Preline `hs-tooltip` reading `The number of daily users`, invisible until hover/focus.
- No charts or sparklines; the only JS behavior is Preline's tooltip plugin.
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.
A soft icon chip and small badge sit above the main value in a short vertical stack.
Loading...
Create a responsive UI block named "KPI Card with Soft Icon and Badge" 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/data-display/kpi-cards/#kpi-card-with-soft-icon-and-badge. 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: data-display/kpi-cards
- Block ID: kpi-card-with-soft-icon-and-badge
- Source description: A soft icon chip and small badge sit above the main value in a short vertical stack.
- Preview iframe: https://preline.co/blocks/data-display/kpi-cards/iframes/free/kpi-card-with-soft-icon-and-badge.html (repo path: blocks/data-display/kpi-cards/iframes/free/kpi-card-with-soft-icon-and-badge.html)
- Source markup reference:
- partials/blocks/sources/pages/as-with-soft-icon-and-badge-in-card.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 grid relationships, content width, card density, border/radius treatment, metric hierarchy, and status marker geometry.
- Do not align a local card to a broader page/header container unless the source does.
- Source content inventory (from the source markup):
- Section wrapper is `max-w-340 px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto` around `grid sm:grid-cols-2 lg:grid-cols-4 gap-4`; exactly four cards.
- The soft icon is a `size-11 bg-surface rounded-lg` square placed to the LEFT of the text in a `flex gap-x-4` row, not stacked above it.
- Label/value pairs in order: `Total users` / `72,540`, `Sessions` / `29.4%`, `Avg. Click Rate` / `56.8%`, `Pageviews` / `92,913`.
- Only cards 1 and 3 carry a pill badge: `12.5%` on `bg-green-100 text-green-900` with an up-trend icon, and `1.7%` on `bg-red-100 text-red-900` with a down-trend icon.
- Only cards 1 and 4 have an `hs-tooltip` help-circle beside the label, with copy `The number of daily users` and `The average pageviews`.
- Requires the Preline runtime for HSTooltip; tooltips are hidden until hover/focus. The block has no links, buttons, or footer row.
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.
The icon, number, label, and change line are centered into one vertical stack.
Loading...
Create a responsive UI block named "Center-Aligned KPI Card" 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/data-display/kpi-cards/#center-aligned-kpi-card. 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: data-display/kpi-cards
- Block ID: center-aligned-kpi-card
- Source description: The icon, number, label, and change line are centered into one vertical stack.
- Preview iframe: https://preline.co/blocks/data-display/kpi-cards/iframes/free/center-aligned-kpi-card.html (repo path: blocks/data-display/kpi-cards/iframes/free/center-aligned-kpi-card.html)
- Source markup reference:
- partials/blocks/sources/pages/as-center-aligned-in-card.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 grid relationships, content width, card density, border/radius treatment, metric hierarchy, and status marker geometry.
- Do not align a local card to a broader page/header container unless the source does.
- Source content inventory (from the source markup):
- Section wrapper is `max-w-340 px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto` around `grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6`; exactly three cards.
- Each card opens with a `size-2` rounded-full dot then an uppercase label; in order they are `Projects` (dot `bg-surface-4`), `Successful conversions` (dot `bg-green-500`), `Failed conversions` (dot `bg-red-500`).
- Centered values in order are `150`, `25`, `4` at `text-3xl sm:text-4xl lg:text-5xl font-semibold`.
- Each card ends with a two-column `
`: left side shows `1.7%` / `5.6%` / `5.6%` above the word `change`, right side shows `5` / `7` / `7` above `last week`.
- Card 1 and 2 deltas are green with an up-triangle glyph; card 3 is red with a down-triangle glyph.
- Card shell is `flex flex-col gap-y-3 lg:gap-y-5 p-4 md:p-5 bg-card border border-card-line shadow-2xs rounded-xl`.
- Fully static; no links, buttons, or Preline JS plugins.
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.
A short stat group shares the card with one trailing add action in the header.
Loading...
Create a responsive UI block named "KPI Cards with Add Button" 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/data-display/kpi-cards/#kpi-cards-with-add-button. 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: data-display/kpi-cards
- Block ID: kpi-cards-with-add-button
- Source description: A short stat group shares the card with one trailing add action in the header.
- Preview iframe: https://preline.co/blocks/data-display/kpi-cards/iframes/free/kpi-cards-with-add-button.html (repo path: blocks/data-display/kpi-cards/iframes/free/kpi-cards-with-add-button.html)
- Source markup reference:
- partials/blocks/sources/pages/as-simple-with-add-more-button.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 grid relationships, content width, card density, border/radius treatment, metric hierarchy, and status marker geometry.
- Do not align a local card to a broader page/header container unless the source does.
- Source content inventory (from the source markup):
- Section wrapper is `max-w-340 px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto` around `grid sm:grid-cols-2 lg:grid-cols-4 gap-4`; four cards styled `bg-card border border-card-line rounded-xl` with no shadow class.
- Labels in order are `Domains`, `Current Builds`, `Requests`, `Acquisition`, each `text-sm font-semibold text-muted-foreground-1`.
- Each value is a used/total pair inside one `
`: `24` / `100`, `1` / `1`, `10` / `10`, `8` / `10`, with the first number `font-semibold` and the `/ n` remainder muted.
- Only cards 1 and 3 have an `hs-tooltip` help-circle next to the label; the copy is `The number of domains` and `The number of requests your Deployments have received.` (trailing period included).
- Despite the block name, the source markup contains no add/plus button, header action, or fifth placeholder card - do not invent one.
- Requires the Preline runtime for HSTooltip; tooltips hidden until hover/focus. Otherwise fully static, with no links or buttons.
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.
Domains
The number of domains
24/ 100
Current Builds
1/ 1
Requests
The number of requests your Deployments have received.