Tailwind CSS Segmented Controls Blocks

Segmented Controls

Segmented controls and inline button groups for navigation, selection, and compact pagination.

Responsive Day Segmented Control Pro

Day options stack into a grid on small screens and merge into one segmented row on larger screens.

Create a responsive UI block named "Responsive Day Segmented Control" 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/ui-components/segmented-controls/#responsive-day-segmented-control. 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: ui-components/segmented-controls
- Block ID: responsive-day-segmented-control
- Source description: Day options stack into a grid on small screens and merge into one segmented row on larger screens.
- Preview iframe: https://preline.co/blocks/ui-components/segmented-controls/iframes/pro/responsive-day-segmented-control.html (repo path: blocks/ui-components/segmented-controls/iframes/pro/responsive-day-segmented-control.html)
- Source markup reference:
  - #responsive-day-segmented-control-html-markup textarea in blocks/ui-components/segmented-controls/index.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 source layout width, wrapper hierarchy, component geometry, responsive order, interaction contents, and exact visible copy.
- Do not replace custom source details with default badges, buttons, cards, placeholders, or unrelated components.
- Source content inventory (from the source markup):
  - Seven buttons in fixed order `Mon`, `Tue`, `Wed`, `Thu`, `Fri`, `Sat`, `Sun`; each abbreviation is followed by `<span class="-ms-2 sm:hidden">` carrying the rest of the word (`day`, `sday`, `nesday`, `rsday`, `day`, `urday`, `day`) so below `sm` the labels read `Monday` through `Sunday` and from `sm` up they collapse back to the three-letter form.
  - Group wrapper is `grid sm:inline-flex rounded-lg shadow-2xs` inside an outer `flex flex-wrap justify-center items-center gap-3` container - a stacked full-width column on mobile, a single merged row from `sm` up.
  - Every button is `py-2 px-3 inline-flex justify-center items-center gap-x-2 ... text-start text-sm font-medium bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover`, with `-mt-px sm:mt-0 sm:-ms-px` collapsing adjacent borders.
  - Corner rounding swaps per breakpoint via `first:rounded-t-lg last:rounded-b-lg sm:first:rounded-s-lg sm:first:ms-0 sm:first:rounded-se-none sm:last:rounded-es-none sm:last:rounded-e-lg` - only the outer ends are rounded in either layout.
  - No button is active, selected, pressed, or disabled on first load; all seven render identically, and none carries an icon, badge, or counter.
  - Fully static `<button type="button">` elements: no `data-hs-*` attributes, no Preline JS plugin, no click handler, and no `aria-current` or `aria-pressed` 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.

<div class="grid sm:inline-flex rounded-lg shadow-2xs">
                          <button type="button" class="py-2 px-3 inline-flex justify-center items-center gap-x-2 -mt-px sm:mt-0 sm:-ms-px first:rounded-t-lg last:rounded-b-lg sm:first:rounded-s-lg sm:first:ms-0 sm:first:rounded-se-none sm:last:rounded-es-none sm:last:rounded-e-lg text-start text-sm font-medium bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                            Mon<span class="-ms-2 sm:hidden">day</span>
                          </button>
                          <button type="button" class="py-2 px-3 inline-flex justify-center items-center gap-x-2 -mt-px sm:mt-0 sm:-ms-px first:rounded-t-lg last:rounded-b-lg sm:first:rounded-s-lg sm:first:ms-0 sm:first:rounded-se-none sm:last:rounded-es-none sm:last:rounded-e-lg text-start text-sm font-medium bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                            Tue<span class="-ms-2 sm:hidden">sday</span>
                          </button>
                          <button type="button" class="py-2 px-3 inline-flex justify-center items-center gap-x-2 -mt-px sm:mt-0 sm:-ms-px first:rounded-t-lg last:rounded-b-lg sm:first:rounded-s-lg sm:first:ms-0 sm:first:rounded-se-none sm:last:rounded-es-none sm:last:rounded-e-lg text-start text-sm font-medium bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                            Wed<span class="-ms-2 sm:hidden">nesday</span>
                          </button>
                          <button type="button" class="py-2 px-3 inline-flex justify-center items-center gap-x-2 -mt-px sm:mt-0 sm:-ms-px first:rounded-t-lg last:rounded-b-lg sm:first:rounded-s-lg sm:first:ms-0 sm:first:rounded-se-none sm:last:rounded-es-none sm:last:rounded-e-lg text-start text-sm font-medium bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                            Thu<span class="-ms-2 sm:hidden">rsday</span>
                          </button>
                          <button type="button" class="py-2 px-3 inline-flex justify-center items-center gap-x-2 -mt-px sm:mt-0 sm:-ms-px first:rounded-t-lg last:rounded-b-lg sm:first:rounded-s-lg sm:first:ms-0 sm:first:rounded-se-none sm:last:rounded-es-none sm:last:rounded-e-lg text-start text-sm font-medium bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                            Fri<span class="-ms-2 sm:hidden">day</span>
                          </button>
                          <button type="button" class="py-2 px-3 inline-flex justify-center items-center gap-x-2 -mt-px sm:mt-0 sm:-ms-px first:rounded-t-lg last:rounded-b-lg sm:first:rounded-s-lg sm:first:ms-0 sm:first:rounded-se-none sm:last:rounded-es-none sm:last:rounded-e-lg text-start text-sm font-medium bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                            Sat<span class="-ms-2 sm:hidden">urday</span>
                          </button>
                          <button type="button" class="py-2 px-3 inline-flex justify-center items-center gap-x-2 -mt-px sm:mt-0 sm:-ms-px first:rounded-t-lg last:rounded-b-lg sm:first:rounded-s-lg sm:first:ms-0 sm:first:rounded-se-none sm:last:rounded-es-none sm:last:rounded-e-lg text-start text-sm font-medium bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                            Sun<span class="-ms-2 sm:hidden">day</span>
                          </button>
                        </div>

Open related account notifications page

Icon Segmented Control Pro

Compact segmented control groups icon-only actions inside one bordered container.

Create a responsive UI block named "Icon Segmented Control" 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/ui-components/segmented-controls/#icon-segmented-control. 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.

Source metadata:
- Catalog family: ui-components/segmented-controls
- Block ID: icon-segmented-control
- Source description: Compact segmented control groups icon-only actions inside one bordered container.
- Preview iframe: https://preline.co/blocks/ui-components/segmented-controls/iframes/pro/icon-segmented-control.html (repo path: blocks/ui-components/segmented-controls/iframes/pro/icon-segmented-control.html)
- Source markup reference:
  - partials/pro/admin-dashboard/layouts-components/buttons-segment-style.html

Block-specific fidelity rules:
- Preserve source layout width, wrapper hierarchy, component geometry, responsive order, interaction contents, and exact visible copy.
- Do not replace custom source details with default badges, buttons, cards, placeholders, or unrelated components.
- Source content inventory (from the source markup):
  - Exactly 2 icon-only buttons live inside one `inline-block p-0.5 bg-card border border-card-line rounded-lg shadow-2xs` shell wrapping a `flex items-center` row - there are no text labels and no selected/active segment.
  - Each button is `size-7` with a `size-4` 24-viewBox outline icon, `rounded-sm`, and `hover:bg-muted-hover hover:text-foreground` over a `text-muted-foreground-1` resting state.
  - The first button contains two icons: a visible check-square (mark-read) icon and a second minus-square icon carrying `hidden` for the toggled state - keep both in the markup.
  - The second button uses an archive-box icon and has only one icon.
  - Tooltip copy in order: `Mark this notification as read`, then `Archive this notification`.
  - Tooltips are Preline HSTooltip (`hs-tooltip` with `[--placement:auto]`, `hs-tooltip-toggle`, `hs-tooltip-content` with `role="tooltip"`), hidden until hover/focus - no dropdown, popover, or overlay plugin is involved.

<div class="inline-block p-0.5 bg-card border border-card-line rounded-lg shadow-2xs transition ease-out">    
                      <div class="flex items-center">
                        <div class="hs-tooltip [--placement:auto] relative inline-block">
                          <button type="button" class="hs-tooltip-toggle size-7 flex shrink-0 justify-center items-center text-muted-foreground-1 hover:bg-muted-hover hover:text-foreground rounded-sm disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                            <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 11 12 14 22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
                            <svg class="shrink-0 size-4 hidden" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M8 12h8"/></svg>
                          </button>
                          <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                            Mark this notification as read
                          </span>
                        </div>
                        <div class="hs-tooltip [--placement:auto] relative inline-block">
                          <button type="button" class="hs-tooltip-toggle size-7 flex shrink-0 justify-center items-center text-muted-foreground-1 hover:bg-muted-hover hover:text-foreground rounded-sm disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                            <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="5" x="2" y="4" rx="2"/><path d="M4 9v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9"/><path d="M10 13h4"/></svg>
                          </button>
                          <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                            Archive this notification
                          </span>
                        </div>
                      </div>
                    </div>

Open related admin dashboard template

Inline Pagination Button Group Pro

Inline pager pairs a short label with adjacent previous and next buttons.

Create a responsive UI block named "Inline Pagination Button Group" 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/ui-components/segmented-controls/#inline-pagination-button-group. 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.

Source metadata:
- Catalog family: ui-components/segmented-controls
- Block ID: inline-pagination-button-group
- Source description: Inline pager pairs a short label with adjacent previous and next buttons.
- Preview iframe: https://preline.co/blocks/ui-components/segmented-controls/iframes/pro/inline-pagination-button-group.html (repo path: blocks/ui-components/segmented-controls/iframes/pro/inline-pagination-button-group.html)
- Source markup reference:
  - #inline-pagination-button-group-html-markup textarea in blocks/ui-components/segmented-controls/index.html

Block-specific fidelity rules:
- Preserve source layout width, wrapper hierarchy, component geometry, responsive order, interaction contents, and exact visible copy.
- Do not replace custom source details with default badges, buttons, cards, placeholders, or unrelated components.
- Source content inventory (from the source markup):
  - Content is a muted `text-sm` label `Product` followed by exactly two buttons - no page numbers, no result counter, no ellipsis.
  - Button copy is `Prev` then `Next`; `Prev` places a chevron-left icon before its text and `Next` places a chevron-right icon after its text.
  - Both buttons share `py-2 px-2.5 inline-flex items-center gap-x-1.5 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs` and neither is disabled or active on first load.
  - Wrapper is `inline-flex sm:justify-end items-center gap-x-3` with an inner `flex justify-end items-center gap-x-2` holding the two buttons.
  - Icons are `size-4` with the 24 viewBox, `fill="none"`, `stroke="currentColor"`, `stroke-width="2"` and rounded caps/joins.
  - The buttons are separate rounded pills with a gap between them, not a joined segmented group with shared borders.
  - Fully static: plain `type="button"` elements with no Preline JS plugins and no data-hs wiring.

<div class="inline-flex sm:justify-end items-center gap-x-3">
                          <p class="text-sm text-muted-foreground-1">
                            Product
                          </p>
                          <div class="flex justify-end items-center gap-x-2">

Open related product details template