Productivity Flyouts

A feature-rich flyout menu with productivity-focused items, status badges, and enhanced interactivity. Perfect for applications that need to showcase features with status indicators and detailed descriptions.

<div
  class="relative h-96"
  x-data="{
      uid: Math.random().toString(36).slice(2),
  // Set to true to show the flyout open by default. Change to false to have it closed by default.
  open: true,
      style: '',
      gap: 8,
      align() {
        const r = this.$refs.btn.getBoundingClientRect();
        const left = r.left + r.width / 2;   // center under button
        const top  = r.bottom + this.gap;    // just below
        this.style = `position:fixed; left:${left}px; top:${top}px; transform:translateX(-50%);`;
      },
      toggle() {
        if (this.open) { this.open = false; return; }
        window.dispatchEvent(new CustomEvent('close-all-flyouts', { detail: this.uid }));
        this.align();
        requestAnimationFrame(() => { this.open = true; });
      },
      close() { this.open = false; }
    }"
  x-init="
      // Close when another flyout opens
      window.addEventListener('close-all-flyouts', (e) => { if (e.detail !== uid) open = false });
      // Keep position synced while open
      const realign = () => { if (open) align() };
      window.addEventListener('resize', realign);
      window.addEventListener('scroll', realign, { passive: true });
      // If open by default, align immediately
      if (open) align();
    "
>
  <button
    class="relative flex items-center justify-center text-center font-medium transition-colors duration-200 ease-in-out select-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:z-10 rounded-md text-zinc-600 bg-zinc-50 outline outline-zinc-100 hover:bg-zinc-200 focus-visible:outline-zinc-600 dark:text-zinc-100 dark:bg-zinc-800 dark:outline-zinc-800 dark:hover:bg-zinc-700 dark:focus-visible:outline-zinc-700 h-9 px-4 text-sm gap-2.5"
    x-ref="btn"
    aria-expanded="false"
    @click.stop="toggle"
  >
    <span>Button</span>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="icon icon-tabler-chevron-down size-4"
      slot="right-icon"
    >
      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
      <path d="M6 9l6 6l6 -6"></path>
    </svg>
  </button>
  <!-- Backdrop for outside click -->
  <div
    x-show="open"
    x-transition.opacity
    class="fixed inset-0 z-(--z-overlay-backdrop)"
    @click="close"
    style="display: none"
  ></div>
  <!-- Teleported flyout (no clipping) -->
  <div
    x-show="open"
    :style="style"
    class="z-(--z-overlay-panel)"
    style="display: none"
    @keydown.escape.window="close"
    x-transition:enter="transition ease-out duration-200"
    x-transition:enter-start="opacity-0 translate-y-1"
    x-transition:enter-end="opacity-100 translate-y-0"
    x-transition:leave="transition ease-in duration-150"
    x-transition:leave-start="opacity-100 translate-y-0"
    x-transition:leave-end="opacity-0 translate-y-1"
  >
      <div
        class="flex-auto w-screen max-w-md overflow-hidden bg-white shadow-lg dark:bg-zinc-800 rounded-xl outline outline-zinc-900/5 dark:outline-white/10 lg:max-w-2xl"
      >
        <div class="p-4 grid grid-cols-1 gap-x-0 gap-y-1 lg:grid-cols-2">
          <div>
            <div class="text-base font-medium text-zinc-900 dark:text-white">
              Benefits
            </div>
            <div class="flex flex-col mt-2 gap-4">
              <a class="text-sm flex items-center w-full group gap-2" href="#_">
                <div
                  class="flex items-center justify-center flex-none rounded-lg duration-300 size-11 bg-zinc-50 dark:bg-white/5 group-hover:bg-white dark:group-hover:bg-white/10"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    class="icon icon-tabler-arrow-refresh size-5 group-hover:text-zinc-500 dark:group-hover:text-zinc-400 text-zinc-500 dark:text-zinc-400"
                    slot="left-icon"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                    <path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path>
                    <path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path>
                  </svg>
                </div>
                <div>
                  <div
                    class="text-base flex items-center w-full font-medium text-zinc-900 dark:text-white group-hover:text-zinc-500 dark:group-hover:text-zinc-400 gap-2"
                  >
                    Sync across devices
                  </div>
                  <p
                    class="text-sm font-medium text-zinc-500 dark:text-zinc-400"
                  >
                    Enable syncing across devices
                  </p>
                </div>
              </a>
              <a class="text-sm flex items-center w-full group gap-2" href="#_">
                <div
                  class="flex items-center justify-center flex-none rounded-lg duration-300 size-11 bg-zinc-50 dark:bg-white/5 group-hover:bg-white dark:group-hover:bg-white/10"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    class="icon icon-tabler-external-file-dots size-5 group-hover:text-zinc-500 dark:group-hover:text-zinc-400 text-zinc-500 dark:text-zinc-400"
                    slot="left-icon"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                    <path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
                    <path
                      d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"
                    ></path>
                    <path d="M9 14v.01"></path>
                    <path d="M12 14v.01"></path>
                    <path d="M15 14v.01"></path>
                  </svg>
                </div>
                <div>
                  <div
                    class="text-base flex items-center w-full font-medium text-zinc-900 dark:text-white group-hover:text-zinc-500 dark:group-hover:text-zinc-400 gap-2"
                  >
                    Create custom documents
                  </div>
                  <p
                    class="text-sm font-medium text-zinc-500 dark:text-zinc-400"
                  >
                    Style your documents with ease
                  </p>
                </div>
              </a>
              <a class="text-sm flex items-center w-full group gap-2" href="#_">
                <div
                  class="flex items-center justify-center flex-none rounded-lg duration-300 size-11 bg-zinc-50 dark:bg-white/5 group-hover:bg-white dark:group-hover:bg-white/10"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    class="icon icon-tabler-external-edit size-5 group-hover:text-zinc-500 dark:group-hover:text-zinc-400 text-zinc-500 dark:text-zinc-400"
                    slot="left-icon"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                    <path
                      d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1"
                    ></path>
                    <path
                      d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z"
                    ></path>
                    <path d="M16 5l3 3"></path>
                  </svg>
                </div>
                <div>
                  <div
                    class="text-base flex items-center w-full font-medium text-zinc-900 dark:text-white group-hover:text-zinc-500 dark:group-hover:text-zinc-400 gap-2"
                  >
                    Edit your files
                  </div>
                  <p
                    class="text-sm font-medium text-zinc-500 dark:text-zinc-400"
                  >
                    Endless possibilities
                  </p>
                </div>
              </a>
              <a class="text-sm flex items-center w-full group gap-2" href="#_">
                <div
                  class="flex items-center justify-center flex-none rounded-lg duration-300 size-11 bg-zinc-50 dark:bg-white/5 group-hover:bg-white dark:group-hover:bg-white/10"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    class="icon icon-tabler-external-brain size-5 group-hover:text-zinc-500 dark:group-hover:text-zinc-400 text-zinc-500 dark:text-zinc-400"
                    slot="left-icon"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                    <path
                      d="M15.5 13a3.5 3.5 0 0 0 -3.5 3.5v1a3.5 3.5 0 0 0 7 0v-1.8"
                    ></path>
                    <path
                      d="M8.5 13a3.5 3.5 0 0 1 3.5 3.5v1a3.5 3.5 0 0 1 -7 0v-1.8"
                    ></path>
                    <path d="M17.5 16a3.5 3.5 0 0 0 0 -7h-.5"></path>
                    <path d="M19 9.3v-2.8a3.5 3.5 0 0 0 -7 0"></path>
                    <path d="M6.5 16a3.5 3.5 0 0 1 0 -7h.5"></path>
                    <path d="M5 9.3v-2.8a3.5 3.5 0 0 1 7 0v10"></path>
                  </svg>
                </div>
                <div>
                  <div
                    class="text-base flex items-center w-full font-medium text-zinc-900 dark:text-white group-hover:text-zinc-500 dark:group-hover:text-zinc-400 gap-2"
                  >
                    Organize files
                  </div>
                  <p
                    class="text-sm font-medium text-zinc-500 dark:text-zinc-400"
                  >
                    Keep them all in one place
                  </p>
                </div>
              </a>
            </div>
          </div>
          <div>
            <div class="text-base font-medium text-zinc-900 dark:text-white">
              Enhance Productivity
            </div>
            <div class="flex flex-col mt-2 gap-4">
              <a class="text-sm flex items-center w-full group gap-2" href="#_">
                <div
                  class="flex items-center justify-center flex-none rounded-lg duration-300 size-11 bg-zinc-50 dark:bg-white/5 group-hover:bg-white dark:group-hover:bg-white/10"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    class="icon icon-tabler-layout-loader-2 size-5 group-hover:text-zinc-500 dark:group-hover:text-zinc-400 text-zinc-500 dark:text-zinc-400"
                    slot="left-icon"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                    <path d="M12 3a9 9 0 1 0 9 9"></path>
                  </svg>
                </div>
                <div>
                  <div
                    class="text-base flex items-center w-full font-medium text-zinc-900 dark:text-white group-hover:text-zinc-500 dark:group-hover:text-zinc-400 gap-2"
                  >
                    Optimize Processes<span
                      class="inline-flex items-center font-medium relative text-white bg-zinc-900 dark:text-zinc-900 dark:bg-zinc-100 px-2.5 py-1 text-xs rounded-md"
                    >
                      New
                    </span>
                  </div>
                  <p
                    class="text-sm font-medium text-zinc-500 dark:text-zinc-400"
                  >
                    Simplify tasks and save time
                  </p>
                </div>
              </a>
              <a class="text-sm flex items-center w-full group gap-2" href="#_">
                <div
                  class="flex items-center justify-center flex-none rounded-lg duration-300 size-11 bg-zinc-50 dark:bg-white/5 group-hover:bg-white dark:group-hover:bg-white/10"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    class="icon icon-tabler-layout-automation size-5 group-hover:text-zinc-500 dark:group-hover:text-zinc-400 text-zinc-500 dark:text-zinc-400"
                    slot="left-icon"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                    <path
                      d="M13 20.693c-.905 .628 -2.36 .292 -2.675 -1.01a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.492 .362 1.716 2.219 .674 3.03"
                    ></path>
                    <path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"></path>
                    <path d="M17 22l5 -3l-5 -3z"></path>
                  </svg>
                </div>
                <div>
                  <div
                    class="text-base flex items-center w-full font-medium text-zinc-900 dark:text-white group-hover:text-zinc-500 dark:group-hover:text-zinc-400 gap-2"
                  >
                    Automate Efforts
                  </div>
                  <p
                    class="text-sm font-medium text-zinc-500 dark:text-zinc-400"
                  >
                    Automate repetitive tasks
                  </p>
                </div>
              </a>
              <a class="text-sm flex items-center w-full group gap-2" href="#_">
                <div
                  class="flex items-center justify-center flex-none rounded-lg duration-300 size-11 bg-zinc-50 dark:bg-white/5 group-hover:bg-white dark:group-hover:bg-white/10"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    class="icon icon-tabler-layout-users-group size-5 group-hover:text-zinc-500 dark:group-hover:text-zinc-400 text-zinc-500 dark:text-zinc-400"
                    slot="left-icon"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                    <path d="M10 13a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"></path>
                    <path d="M8 21v-1a2 2 0 0 1 2 -2h4a2 2 0 0 1 2 2v1"></path>
                    <path d="M15 5a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"></path>
                    <path d="M17 10h2a2 2 0 0 1 2 2v1"></path>
                    <path d="M5 5a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"></path>
                    <path d="M3 13v-1a2 2 0 0 1 2 -2h2"></path>
                  </svg>
                </div>
                <div>
                  <div
                    class="text-base flex items-center w-full font-medium text-zinc-900 dark:text-white group-hover:text-zinc-500 dark:group-hover:text-zinc-400 gap-2"
                  >
                    Seamless Collaboration
                  </div>
                  <p
                    class="text-sm font-medium text-zinc-500 dark:text-zinc-400"
                  >
                    Share and work together effortlessly
                  </p>
                </div>
              </a>
              <a class="text-sm flex items-center w-full group gap-2" href="#_">
                <div
                  class="flex items-center justify-center flex-none rounded-lg duration-300 size-11 bg-zinc-50 dark:bg-white/5 group-hover:bg-white dark:group-hover:bg-white/10"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    class="icon icon-tabler-layout-users-clock size-5 group-hover:text-zinc-500 dark:group-hover:text-zinc-400 text-zinc-500 dark:text-zinc-400"
                    slot="left-icon"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                    <path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path>
                    <path d="M12 7v5l3 3"></path>
                  </svg>
                </div>
                <div>
                  <div
                    class="text-base flex items-center w-full font-medium text-zinc-900 dark:text-white group-hover:text-zinc-500 dark:group-hover:text-zinc-400 gap-2"
                  >
                    Track Time
                  </div>
                  <p
                    class="text-sm font-medium text-zinc-500 dark:text-zinc-400"
                  >
                    Monitor and manage time
                  </p>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
  </div>
</div>

Features

Status badges - Visual indicators for new or featured items
Productivity-focused content - Organized around workflow enhancement
Enhanced hover states - Interactive feedback with smooth transitions
Two-column layout - Efficient use of space with clear content grouping
Mixed content types - Icons, badges, text, and descriptions
Professional styling - Clean, modern appearance suitable for business applications

Usage

---
import ProductivityFlyout from '/src/components/flyouts/ProductivityFlyout.astro'
---

<!-- Basic usage -->
<ProductivityFlyout />

<!-- With initial state -->
<ProductivityFlyout open={true} />

Customization

Status Badges

Add or modify badges to indicate status:

<h3 class="text-base flex items-center w-full font-medium text-zinc-900 dark:text-white group-hover:text-zinc-500 dark:group-hover:text-zinc-400 gap-2">
  Your feature name
  <span class="inline-flex items-center font-medium relative text-white bg-green-600 dark:text-green-900 dark:bg-green-100 px-2.5 py-1 text-xs rounded-md">
    Updated
  </span>
  <span class="inline-flex items-center font-medium relative text-white bg-blue-600 dark:text-blue-900 dark:bg-blue-100 px-2.5 py-1 text-xs rounded-md">
    Popular
  </span>
</h3>

Badge Variants

Different badge styles for various statuses:

<!-- New feature -->
<span class="inline-flex items-center font-medium relative text-white bg-zinc-900 dark:text-zinc-900 dark:bg-zinc-100 px-2.5 py-1 text-xs rounded-md">
  New
</span>

<!-- Updated feature -->
<span class="inline-flex items-center font-medium relative text-white bg-green-600 dark:text-green-900 dark:bg-green-100 px-2.5 py-1 text-xs rounded-md">
  Updated
</span>

<!-- Beta feature -->
<span class="inline-flex items-center font-medium relative text-white bg-yellow-600 dark:text-yellow-900 dark:bg-yellow-100 px-2.5 py-1 text-xs rounded-md">
  Beta
</span>

<!-- Limited time -->
<span class="inline-flex items-center font-medium relative text-white bg-red-600 dark:text-red-900 dark:bg-red-100 px-2.5 py-1 text-xs rounded-md">
  Limited
</span>

Content Organization

Structure content by productivity categories:

<div>
  <h3 class="text-base font-medium text-zinc-900 dark:text-white">
    Your Category Name
  </h3>
  <div class="flex flex-col mt-2 gap-4">
    <!-- Your productivity items -->
  </div>
</div>

Icon Selection

Choose productivity-focused icons:

<!-- Common productivity icons -->
<svg class="icon icon-tabler-rocket size-5">
<svg class="icon icon-tabler-zap size-5">
<svg class="icon icon-tabler-chart-line size-5">
<svg class="icon icon-tabler-trending-up size-5">
<svg class="icon icon-tabler-clock size-5">
<svg class="icon icon-tabler-calendar size-5">
<svg class="icon icon-tabler-checklist size-5">
<svg class="icon icon-tabler-target size-5">

Best Practices

Badge consistency - Use consistent badge colors and meanings
Content relevance - Focus on productivity-enhancing features
Visual hierarchy - Ensure badges don’t overwhelm the main content
Status accuracy - Keep badge information up-to-date
Mobile optimization - Ensure badges remain readable on small screens
Accessibility - Include screen reader-friendly status indicators

← Back to Flyout Menus